jQuery Dropdown Toggle

by Hari Menon

HTML

<head>
    <link rel='stylesheet' type='text/css' href='http://arshaw.com/js/fullcalendar-1.5.1/fullcalendar/fullcalendar.css' />    
</head>

<ul id="nav">
    <li class="toggle">
        <a href="#">
            <span class="fc-button fc-state-default fc-corner-left">
                <span class="fc-button-inner">
                    <span class="fc-button-content overview_button">Overview</span>
                    <span class="fc-button-effect">
                        <span></span>
                    </span>
                </span>
            </span>
        </a>
        <ul style="display:none">
            <li><a href="#YTD">This year</a></li>
            <li><a href="#3">Last 3 months</a></li>
            <li><a href="#6">Last 6 months</a></li>
            <li><a href="#12">Last 12 months</a></li>
            <li><a href="#all">All data</a></li>
        </ul>
    </li>
    <li class="toggle">
        <a href="#">
            <span class="fc-button fc-state-default">
                <span class="fc-button-inner">
                    <span class="fc-button-content perpet_button">Per X</span>
                    <span class="fc-button-effect">
                        <span></span>
                    </span>
                </span>
            </span>
        </a>
        <ul style="display:none">
            <li><a href="#YTD">This year</a></li>
            <li><a href="#3">Last 3 months</a></li>
            <li><a href="#6">Last 6 months</a></li>
            <li><a href="#12">Last 12 months</a></li>
            <li><a href="#all">All data</a></li>
        </ul>
    </li>
    <li class="toggle">
        <a href="#">
            <span class="fc-button fc-state-default">
                <span class="fc-button-inner">
                    <span class="fc-button-content percat_button">Per Y</span>
                    <span class="fc-button-effect">
                        <span></span>
                    </span>
                </span>
            </span>
   ...

CSS

#nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#nav a {
    display: block;
    font-weight: normal;
    text-decoration: none;
}

#nav li ul li a {
    display: block;
    background:#f7f7f7;
    padding: 8px 0 8px 20px;
    font-weight: normal;
    color: #3b3b3b;
    width: 10em;
}

#nav li ul li a:hover {
    color: #000;
    background-color: #dadada;
}

#nav li {
    float: left;
}

#nav li ul {
    position: absolute;
    width: 11.55em;
    left: auto;
    border-left: solid 1px #CCC;
    border-right: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
    z-index: 500;
    
}

JavaScript

$(".toggle").click(function() {
    $(this).siblings('li').children('ul').hide();
    $('ul', this).toggle();
});