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); }); });