<!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery-1.11.1.js"></script> <style> nav a { text-decoration: none; } nav > ul > li { float: left; text-align: center; padding: 0 0.5em; } nav li ul.sub-menu { display: none; padding-left: 0 !important; } .sub-menu li { color: white; } .sub-menu li:hover { background-color: black; } .sub-menu li:hover a { color: white; } ul { list-style: none; } </style> </head> <body> <nav> <ul> <li><a href="#">Home <ul class="sub-menu"> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> </ul> </li> <li><a href="#">Programming <ul class="sub-menu"> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> </ul> </li> <li><a href="#">Japanese <ul class="sub-menu"> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> </ul> </li> </ul> </nav> </body> <script type="text/javascript"> $(document).ready(function() { $('nav li').hover(function() { $(this).find('.sub-menu').css('display', 'block'); }, function() { $(this).find('.sub-menu').css('display', 'none'); }); }); </script> </html>
下面这样也可以
$(document).ready(function(){
//导航
$("#nav ul li").hover(function(){
$(this).addClass('hover');
$(this).find("ul").show();//鼠标滑过查找li下面的第一个ul然后显示；
},function(){
$(this).removeClass('hover');
$(this).find("ul").hide();//鼠标离开隐藏li下面的ul；
})
showtime();
});