jquery 实现的下拉菜单，原来用的mouseover（）和 mouseout（） 实现的，可是有点缺陷（鼠标经过子菜单会跳动），自己感觉也不太好，今天又改了下用hover()，兼容很好，支持主流浏览器，点击运行可以查看效果。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>下拉菜单</title> <script type="text/javascript" src="http://www.uedspace.com/zuopin/js/jquery.js"></script> <style type="text/css"> * { margin:0px; padding:0px;} html{color:#333;background:#FFF;} body{ text-align:left; font-style:normal; font-size:12px; line-height:20px; font-family:"宋体";} ul,ol,li{list-style:none;} table{ border-collapse:collapse; border-spacing:0;} img,fieldset {border:0;} h1,h2,h3,h4,h5,h6{font-size:14px;} input,label,select,option,textarea,button,fieldset,legend,table,td {font-size:12px;} sup {vertical-align:text-top;} sub {vertical-align:text-bottom;} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;} a { color:#333; text-decoration:none; font-style: normal; } a:hover{ color:#F00; text-decoration:underline; cursor: pointer;} #nav{ width:600px; margin-left:auto; margin-right:auto; height30px; line-height:30px; background-color:#333; margin-top:50px;} #nav li{ float:left; text-align:center; width:100px; position:relative;} #nav li a{ color:#fff; background-color:#333; display:block;} #nav li a:hover{ color:#fff; background-color:#666; } #nav li ul{ line-height:25px; position:absolute; top:30px; left:0px; background-color:#333; color:#fff;} #nav li ul li a{ background-color:#333; display:block;} #nav li ul li a:hover{ background-color:#666;} </style> </head> <body> <ul id="nav"> <li><a href="#">频道一</a> <ul> <li><a href="#">频道一1</a></li> <li><a href="#">频道一1</a></li> <li><a href="#">频道一1</a></li> <li><a href="#">频道一1</a></li> <li><a href="#">频道一1</a></li> </ul> </li> <li><a href="#">频道二</a> <ul> <li><a href="#">频道二2</a></li> <li><a href="#">频道二2</a></li> <li><a href="#">频道二2</a></li> <li><a href="#">频道二2</a></li> <li><a href="#">频道二2</a></li> </ul> </li> <li><a href="#">频道三</a> <ul> <li><a href="#">频道三3</a></li> <li><a href="#">频道三3</a></li> <li><a href="#">频道三3</a></li> <li><a href="#">频道三3</a></li> <li><a href="#">频道三3</a></li> </ul> </li> <li><a href="#">频道四</a> <ul> <li><a href="#">频道四1</a></li> <li><a href="#">频道四1</a></li> <li><a href="#">频道四1</a></li> <li><a href="#">频道四1</a></li> <li><a href="#">频道四1</a></li> </ul> </li> <li><a href="#">频道五</a> <ul> <li><a href="#">频道五5</a></li> <li><a href="#">频道五5</a></li> <li><a href="#">频道五5</a></li> <li><a href="#">频道五5</a></li> <li><a href="#">频道五5</a></li> </ul> </li> <li><a href="#">频道六</a> <ul> <li><a href="#">频道六6</a></li> <li><a href="#">频道六6</a></li> <li><a href="#">频道六6</a></li> <li><a href="#">频道六6</a></li> <li><a href="#">频道六6</a></li> </ul> </li> </ul> <script type="text/javascript"> var subNav = $('#nav li').find('ul'); subNav.hide(); var navName =$('#nav > li'); navName.hover(function(){ $(this).children().show(); },function(){ subNav.hide(); }); </script> </body> </html>
提示：你可以先修改部分代码再运行。