<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JQuery 横向下拉导航延迟版 </title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".subNavLi").hover(function(){ //鼠标的over函数 $(this).addClass("current"); subNav=$(this).children("ul"); //获得要显示的ul，即子菜单 timeoutid=setTimeout(function(){ //延迟处理，防止鼠标无意划过时，子菜单出现 if(subNav.css("display")=="none"){ //鼠标指向有子菜单的元素时， subNav.slideToggle(); //显示子菜单 } },200); }, function(){ //鼠标的out函数 $(this).removeClass("current"); clearTimeout(timeoutid); if(subNav.css("display")=="block"){ //鼠标移出子菜单元素时， subNav.slideToggle(); //子菜单消失 } }); }); </script> <style type="text/css"> * { margin:0; padding:0; } li { display:inline; } li ul { display:none; position:absolute; padding-top:30px; } li.current { background:#eee; } li.current a { color:#f00; } </style> </head> <body> <div class="container"> <ul class="menu"> <li><a href="#">首页</a></li> <li class="subNavLi"><a href="#">原创作品</a> <ul class="subNav"> <li><a href="#">1111111111111111111111</a></li> <li><a href="#">1111111111111111111111</a></li> <li><a href="#">1111111111111111111111</a></li> </ul> </li> <li class="subNavLi"><a href="#">设计素材</a> <ul class="subNav"> <li><a href="#">SubNav</a></li> <li><a href="#">SubNav</a></li> <li><a href="#">SubNav</a></li> <li><a href="#">SubNav</a></li> </ul> </li> <li class="subNavLi"><a href="#">佳作欣赏</a> <ul class="subNav"> <li><a href="#">SubNav Link</a></li> <li><a href="#">SubNav Link</a></li> <li><a href="#">SubNav Link</a></li> <li><a href="#">SubNav Link</a></li> <li><a href="#">SubNav Link</a></li> <li><a href="#">SubNav Link</a></li> </ul> </li> <li><a href="#">论坛</a></li> <li><a href="#">关于我们</a></li> </ul> </div> </body> </html>