JS+CSS简洁的二级下拉菜单代码，经测试，兼容性不错，推荐大家参考学习。如果您想实际运用到自己的网站中，可能要进行一些修改，比如CSS字体大小和颜色等，当然这需要您有一定的HTML知识。 示例： <!DOCTYPE html><br /> <html><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /> <title>css二级菜单演示</title><br /> <style type="text/css"><br /> <!--<br /> * {<br /> margin:0;<br /> padding:0;<br /> border:0;<br /> }<br /> body {<br /> font-family: arial, 宋体, serif;<br /> font-size:12px;<br /> }<br /> #nav {<br /> line-height: 24px;<br /> list-style-type: none;<br /> background:#666;<br /> }<br /> #nav a {<br /> display: block;<br /> width: 80px;<br /> text-align:center;<br /> }<br /> #nav a:link {<br /> color:#666;<br /> text-decoration:none;<br /> }<br /> #nav a:visited {<br /> color:#666;<br /> text-decoration:none;<br /> }<br /> #nav a:hover {<br /> color:#FFF;<br /> text-decoration:none;<br /> font-weight:bold;<br /> }<br /> #nav li {<br /> float: left;<br /> width: 80px;<br /> background:#CCC;<br /> }<br /> #nav li a:hover {<br /> background:#999;<br /> }<br /> #nav li ul {<br /> line-height: 27px;<br /> list-style-type: none;<br /> text-align:left;<br /> left: -999em;<br /> width: 80px;<br /> position: absolute;<br /> }<br /> #nav li ul li {<br /> float: left;<br /> width: 80px;<br /> background: #F6F6F6;<br /> }<br /> #nav li ul a {<br /> display: block;<br /> width: 80px;<br /> text-align:center<br /> }<br /> #nav li ul a:link {<br /> color:#666;<br /> text-decoration:none;<br /> }<br /> #nav li ul a:visited {<br /> color:#666;<br /> text-decoration:none;<br /> }<br /> #nav li ul a:hover {<br /> color:#F3F3F3;<br /> text-decoration:none;<br /> font-weight:normal;<br /> background:#C00;<br /> }<br /> #nav li:hover ul {<br /> left: auto;<br /> }<br /> #nav li.sfhover ul {<br /> left: auto;<br /> }<br /> #content {<br /> clear: left;<br /> }<br /> --><br /> </style><br /> <script type=text/javascript><!--//--><![CDATA[//><!--<br /> function menuFix() {<br /> var sfEls = document.getElementById("nav").getElementsByTagName("li");<br /> for (var i=0; i<sfEls.length; i++) {<br /> sfEls[i].onmouseover=function() {<br /> this.className+=(this.className.length>0? " ": "") + "sfhover";<br /> }<br /> sfEls[i].onMouseDown=function() {<br /> this.className+=(this.className.length>0? " ": "") + "sfhover";<br /> }<br /> sfEls[i].onMouseUp=function() {<br /> this.className+=(this.className.length>0? " ": "") + "sfhover";<br /> }<br /> sfEls[i].onmouseout=function() {<br /> this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),<br /> "");<br /> }<br /> }<br /> }<br /> window.onload=menuFix;<br /> //--><!]]></script><br /> </head><br /> <body><br /> <ul id="nav"><br /> <li><a href="#">新浪</a><br /> <ul><br /> <li><a href="#">新浪新闻</a></li><br /> <li><a href="#">新浪体育</a></li><br /> <li><a href="#">新浪汽车</a></li><br /> <li><a href="#"><b>新浪微博</b></a></li><br /> <li><a href="#">新浪科技</a></li><br /> </ul><br /> </li><br /> </ul><br /> </body><br /> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>提示：可修改后代码再运行! 文章导航 JS简陋的下拉菜单代码，使用DW8制作的效果jQuery多级折叠(树形)菜单，动态展开和收缩
