html代码：
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script> </head> </head> <body> <div id="navMenu"> <ul> <li><a href="#">Home</a> <ul> <li> <a href="#">DropDown</a> <a href="#">DropDown</a> <a href="#">DropDown</a> <a href="#">DropDown</a> </li> </ul> </li> <li><a href="#">About</a> <ul> <li><a href="#">DropDown</a></li> <li><a href="#">DropDown</a></li> <li><a href="#">DropDown</a></li> <li><a href="#">DropDown</a></li> </ul> </li> <li><a href="#">Media</a></li> <li><a href="#">Contact</a></li> </ul> </div> </body> </html>
css代码：
body{background: #ededed;}
#navMenu{margin-top: 50px;}
#navMenu ul{margig:0; padding: 0; list-style: none;background: #252525;text-align: center;position: relative;}
#navMenu ul li {display: inline-block;}
#navMenu ul li a{display: block; height:35px; width: 150px; color:#fff;font-family: helvetica;line-height: 43px;text-decoration: none;
transition: background 0.5s linear 0s, color 0.5s linear 0s;}
#navMenu ul li a:hover{background: #f0300b; color: #781705;}
#navMenu ul ul{position: absolute; width: 150px; display: none;}
#navMenu ul ul li{display: block; background: #252525;}
js代码
$(document).ready(function(){
$("#navMenu ul li").hover(function(){
$(this).find("ul").stop().slideToggle(200);
});
});