Menu System

by bizamajig

HTML

<div>
    <a href="#" id="menu1">Menu 1</a>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
</div>

<div>
    <a href="#" id="menu2">Menu 2</a>
    <ul>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
    </ul>
</div>

<div>
    <a href="#" id="menu3">Menu 3</a>
    <ul>
        <li><a href="#">Link 7</a></li>
        <li><a href="#">Link 8</a></li>
        <li><a href="#">Link 9</a></li>
    </ul>
</div>

CSS

div {
    float: left; 
    margin: 0 1px 0 0;
}

a {
    background: #333;
    color: #fff;
    display: block;
    padding: 10px 30px;
    text-align: center;
    text-decoration: none;
    width: 60px; 
}

a:hover {
    background: #555;   
}

ul {
    background: #ddd;
    position: absolute;
    left: 10px;   
}

ul a {
    background: #eee;
    color: #333;
}

ul li {
    display: block;
    float: left;
}

ul a:hover {
    background: #ccc;
    color: #333;
}

JavaScript

$(document).ready(function(){
    $('ul').hide();
    $('div').click(function(){
        $(this).siblings().find('ul').slideUp(500);
        $(this).find('ul').slideToggle(500);
    });
});