CSS Dropdown Menu (with and without jQuery)

Dropdown Menu Without JavaScript

Both dropdown menu are same, the only difference is menu above is working without the JavaScript support, and menu in example below is using jQuery support to get that slide effect.

The CSS

#nav ul li{border-right:none;border-bottom:1px solid #DDD;width:170px;height:39px;display:block;visibility:visible}
#nav ul li a{border-right:none;color:#6791AD;text-shadow:1px 1px 1px #FFF;border-bottom:1px solid #FFF}
#nav ul li:hover{background:#DFEEF0}
#nav ul{display:none;visibility:hidden;position:absolute;top:40px;z-index:1;background:#f2f5f6;border-bottom:1px solid #DDD;border-right:1px solid #DDD;border-left:1px solid #DDD;border-radius:0 0 3px 3px;box-shadow:2px 2px 3px #ECECEC;-webkit-box-shadow:2px 2px 3px #ECECEC;-moz-box-shadow:2px 2px 3px #ECECEC;width:170px;padding:0}
#nav li:hover > ul{display:block;visibility:visible}
#nav{height:39px;font:12px Geneva, Arial, Helvetica, sans-serif;background:#3AB3A9;border:1px solid #30A097;border-radius:3px;min-width:500px;margin-left:0;padding-left:0}
#nav li{list-style:none;display:block;float:left;height:40px;position:relative;border-right:1px solid #52BDB5}
#nav li a{line-height:40px;text-decoration:none;border-right:1px solid #389E96;height:40px;color:#FFF;text-shadow:1px 1px 1px #66696B;display:block;margin:0;padding:0 10px 0 30px}
#nav .site-name,#nav .site-name:hover{padding-left:10px;padding-right:10px;color:#FFF;text-shadow:1px 1px 1px #66696B;font:italic 20px/38px Georgia, "Times New Roman", Times, serif;background:url(images/saaraan.png) no-repeat 10px 5px;width:160px;border-right:1px solid #52BDB5}
#nav .site-name a{width:129px;overflow:hidden}
#nav li:hover{background:#3BA39B}
#nav ul li:last-child,#nav ul li:last-child a{border-bottom:none}
#nav ul ul,#nav ul ul ul{top:0;left:170px;display:none;visibility:hidden;border:1px solid #DDD;z-index:1}
<!--[if IE 7]>
<style>
#nav{
	margin-left:0px
}
#nav ul{
	left:-40px;
}
#nav ul ul{
	left:130px;
}
#nav ul ul ul{
	left:130px;
}
</style>
<![endif]-->

The HTML

<ul id="nav">
<li class="site-name"><a href="#"> </a></li>
    <li class="yahoo"><a href="#">Yahoo</a>
        <ul>
        <li><a href="#">Yahoo Games »</a>            
            <ul>
                <li><a href="#">Board Games</a></li>
                <li><a href="#">Card Games</a></li>
                <li><a href="#">Puzzle Games</a></li>
                <li><a href="#">Skill Games »</a>
                <ul>
                    <li><a href="#">Yahoo Pool</a></li>
                    <li><a href="#">Chess</a></li>
                </ul>
                </li>
            </ul>
		</li>
        <li><a href="#">Yahoo Search</a></li>
        <li><a href="#">Yahoo Answsers</a></li>
        </ul>
    </li> 
    <li class="facebook"><a href="#">Facebook</a>
        <ul>
        <li><a href="#">Facebook Pages</a></li>
        <li><a href="#">Facebook Groups</a></li>
        </ul>
    </li>
    <li class="google"><a href="#">Google</a>
        <ul>
        <li><a href="#">Google mail</a></li>
        <li><a href="#">Google Plus</a></li>
        <li><a href="#">Google Search »</a>
            <ul>
                <li><a href="#">Search Images</a></li>
                <li><a href="#">Search Web</a></li>
            </ul>
        </li>
        </ul>
    </li>
    <li class="twitter"><a href="#">Twitter</a>
            <ul>
                <li><a href="#">New Tweets</a></li>
                <li><a href="#">Compose a Tweet</a></li>
            </ul>
    </li>
</ul>

Dropdown Menu With JavaScript (jQuery)

jQuery

If you need slide effect like in example above, copy/paste jQuery code below within <script></script> tags.

$(document).ready(function(){
	$("#nav li").hover(
	function(){
		$(this).children('ul').hide();
		$(this).children('ul').slideDown('fast');
	},
	function () {
		$('ul', this).slideUp('fast');            
	});
});