<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <ul id="nav"> <li class="site-name"><a href="#"> </a></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="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="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> </div> </div>

#nav{ height: 39px; font: 12px Geneva, Arial, Helvetica, sans-serif; background: #3AB3A9; border: 1px solid #30A097; border-radius: 3px; min-width:500px; margin-left: 0px; padding-left: 0px; } #nav li{ list-style: none; display: block; float: left; height: 40px; position: relative; border-right: 1px solid #52BDB5; } #nav li a{ padding: 0px 10px 0px 30px; margin: 0px 0; line-height: 40px; text-decoration: none; border-right: 1px solid #389E96; height: 40px; color: #FFF; text-shadow: 1px 1px 1px #66696B; } #nav ul{ background: #f2f5f6; padding: 0px; border-bottom: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD; border-left:1px solid #DDDDDD; border-radius: 0px 0px 3px 3px; box-shadow: 2px 2px 3px #ECECEC; -webkit-box-shadow: 2px 2px 3px #ECECEC; -moz-box-shadow:2px 2px 3px #ECECEC; width:170px; } #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.facebook{ background: url(../images/facebook.png) no-repeat 9px 12px; } #nav li.facebook:hover { background: url(../images/facebook.png) no-repeat 9px 12px #3BA39B; } #nav li.yahoo{ background: url(../images/yahoo.png) no-repeat 9px 12px; } #nav li.yahoo:hover { background: url(../images/yahoo.png) no-repeat 9px 12px #3BA39B; } #nav li.google{ background: url(../images/google.png) no-repeat 9px 12px; } #nav li.google:hover { background: url(../images/google.png) no-repeat 9px 12px #3BA39B; } #nav li.twitter{ background: url(../images/twitter.png) no-repeat 9px 12px; } #nav li.twitter:hover { background: url(../images/twitter.png) no-repeat 9px 12px #3BA39B; } #nav li:hover{ background: #3BA39B; } #nav li a{ display: block; } #nav ul li { border-right:none; border-bottom:1px solid #DDDDDD; width:170px; height:39px; } #nav ul li a { border-right: none; color:#6791AD; text-shadow: 1px 1px 1px #FFF; border-bottom:1px solid #FFFFFF; } #nav ul li:hover{background:#DFEEF0;} #nav ul li:last-child { border-bottom: none;} #nav ul li:last-child a{ border-bottom: none;} /* Sub menus */ #nav ul{ display: none; visibility:hidden; position: absolute; top: 40px; } /* Third-level menus */ #nav ul ul{ top: 0px; left:170px; display: none; visibility:hidden; border: 1px solid #DDDDDD; } /* Fourth-level menus */ #nav ul ul ul{ top: 0px; left:170px; display: none; visibility:hidden; border: 1px solid #DDDDDD; } #nav ul li{ display: block; visibility:visible; } #nav li:hover > ul{ display: block; visibility:visible; }

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