<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="jquery-1.7.1.min.js"></script> <style> *{ margin:0; padding:0; border:0;} body{ font-family: arial, 宋体, serif; font-size:12px;} #nav{ width:180px; line-height: 24px; list-style-type: none;text-align:left;} #nav span{ width:160px; display:block; padding-left:20px; cursor:pointer;} #nav li{ background:#ccc; border-bottom:#fff 1px solid; float:left;display:inline;} #nav a:link, #nav a:visited{ color:#666; text-decoration:none;}/*灰黑色*/ #nav a:hover{ color:#fff ;text-decoration:none; font-weight:bold;}/*白色*/ #nav li dl{ list-style:none; text-align:left; border-top:1px solid #fff;} #nav li dl dd{ background:#ebebeb; border-bottom:#fff 1px solid;}/*灰白色，白色*/ #nav li dl a{ padding-left:20px; width:160px; display:block;} #parent{ width:300px; padding-left:20px;} .dis{ display:none;} .ondis{ display:block;} .onhover{ background:#009900; color:#fff;}/*绿色，白色*/ .linkhover{ background:#cc0000; color:#fff;}/*红色，白色*/ .active{ background:#00ccff; color:#666666;}/*蓝色，灰黑色*/ </style> <script> $(function(){ $("#nav li").each( function(){ $(this).children("dl").addClass("dis");// $(this).children()是li的所有子元素，包括span,dl，这里隐藏其dl子元素 $(this).children().click(//设置当前li的所有子元素的点击事件 function(){$(this).next().toggle("normal");} //$(this)是当前li的子元素,如span，dl等 ); $(this).click(function(){ $('#nav li').each(function(){$(this).find("span").removeClass();});//去掉所有li的span元素的样式， $(this).find('span').addClass("onhover");//设置当前li的span元素样式 }); }); }) $(function(){$("#nav dl dd").hover(function(){$(this).children().addClass("linkhover");},function(){$(this).children().removeClass("linkhover")});}) </script> <title>jquery弹出二级菜单</title> </head> <body> <div id="parent"> <ul id="nav"> <li id="li"><span>frist nav1</span> <dl> <dd><a href="http://down.php100.com">subnav1 menu1</a></dd> <dd><a href="#">subnav1 menu2</a></dd> <dd><a href="#">subnav1 menu3</a></dd> <dd><a href="#">subnav1 menu4</a></dd> </dl> </li> <li><span>frist nav2</span> <dl> <dd><a href="http://www.php100.com">subnav2 menu1</a></dd> <dd><a href="#">subnav2 menu2</a></dd> <dd><a href="#">subnav2 menu3</a></dd> <dd><a href="#">subnav2 menu4</a></dd> </dl> </li> <li><span>frist nav3</span> <dl> <dd><a href="#">subnav3 menu1</a></dd> <dd><a href="#">subnav3 menu2</a></dd> <dd><a href="#">subnav3 menu3</a></dd> <dd><a href="#">subnav3 menu4</a></dd> </dl> </li> <li><span>frist nav4</span> <dl> <dd><a href="http://mb.php100.com">subnav4 menu1</a></dd> <dd><a href="#">subnav4 menu2</a></dd> <dd><a href="#">subnav4 menu3</a></dd> <dd><a href="#">subnav4 menu4</a></dd> </dl> </li> </ul> </div> </body> </html>
转自：http://www.bkjia.com/jQuery/449336.html
另一个例子：http://www.93diy.com/a/JS/menu/2013/0110/146.html(非常好的例子)
关于用css实现导航栏菜单的水平横向并列，用<li><a></li><li><a></li>来写，并且将li添加以下样式即可：
float: left;
list-style: none;
注意，要写实现水平并列，li元素内不能包含块元素，如div，和display:block的span，否则会产生换行。