JS下拉菜单
Javascript实现二级菜单的方法 代码如下：
<html> <head> <meta charset="UTF-8"> <title>导航栏二级菜单-拓源网(TOYEAN.COM)</title> <style> *,body { margin:0; padding:0; } body { font-size:14px; font-family:microsoft yahei; } ul,li { list-style:none; } a { text-decoration:none; } .wrap { width:1000px; margin:0 auto; } .header { width:100%; border-bottom:1px solid #eee; } .logo { float:left; font-size:22px; line-height:50px; } .menu { float:right; } .menu li { line-height:50px; display:inline-block; vertical-align:top; position:relative; } .menu li a { padding:0 20px; font-size:18px; color:#333; } .menu li a:hover { color:#f60; } .menu li a.sub:after { content:"∨"; margin:0 0 0 5px; } .menu li dl { min-width:120px; padding:10px 20px; border:1px solid #ccc; background:#fff; position:absolute; top:51px; left:0; display:none; } .menu dl dd { line-height:30px; } .menu dl a { padding:0; font-size:14px; border-bottom:1px solid #eee; display:block; } .menu dl a.nb { border:0; } .menu dl:before { content:""; height:10px; width:10px; background:#fff; border:1px solid #ccc; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); border-left:0; border-bottom:0; position:absolute; top:-6px; left:28px; } .clear { clear:both; } </style> <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script> <script> $(function(){ $(".menu li").each(function(){ if($(this).children("dl").length>0){ $(this).children("a").addClass("sub"); } }); $(".sub").parent().hover(function(){ $(this).children("dl").toggle(); }); $(".menu dl dd:last-child a").addClass("nb"); }); </script> </head> <body> <div class="header"> <div class="wrap"> <div class="logo">导航二级菜单测试</div> <div class="menu"> <ul> <li><a href="">首页</a></li> <li><a href="">关于我们</a></li> <li> <a href="">新闻列表</a> <dl> <dd><a href="">行业新闻</a></dd> <dd><a href="">时政新闻</a></dd> <dd><a href="">国际新闻</a></dd> </dl> </li> <li> <a href="">产品中心</a> <dl> <dd><a href="">产品01</a></dd> <dd><a href="">产品02</a></dd> <dd><a href="">产品03</a></dd> <dd><a href="">产品04</a></dd> <dd><a href="">产品05</a></dd> </dl> </li> <li><a href="">联系我们</a></li> </ul> </div> </div> <div class="clear"></div> </div> </body> </html>
