css+js写的二级菜单

sky_uck · 发表于 2013-2-7 19:21:56

这个二级纵向菜单完成是照着别人的例子写的，网上很多这样的代码，感觉这种最简单而且很容易理解，对css熟练的话几分钟就可以搞定，关键是和程序容易结合。
最终效果如图所示：

ul,li,a{margin:0;padding:0;} //这个很重要，我竟然不知道它会有缩进，郁闷  body { font-family: Arial,Verdana,Helvetica,sans-serif; font-size:12px; }    #nav { width:180px; list-style-type: none; text-align:left; margin:10px 0 0 10px; }    #nav a { width: 180px;    display: block; padding:5px 0 5px 20px; }    #nav li { background:#cccccc; border-bottom:#ffffff 1px solid; float:left; }    #nav li a:hover{ background:#cc0000; }    #nav a:link  { color:#666; text-decoration:none; }    #nav a:visited  { color:#666; text-decoration:none; }    #nav a:hover  { color:#ffffff; text-decoration:none; font-weight:bold; }    #nav li ul { list-style:none; text-align:left; padding:0; }    #nav li ul li{    background: #ebebeb; }    #nav li ul a{ padding-left:20px; width:180px; }    #nav li ul a:link  { color:#666; text-decoration:none; } #nav li ul a:visited  { color:#666; text-decoration:none; } #nav li ul a:hover { color:#f3f3f3; text-decoration:none; font-weight:normal; background:#cc0000; } #content { clear: left; } #nav ul.collapsed { display: none; } #nav li:hover ul { //以下代码不懂什么意思，好像无关紧要（去掉完全没影响）…… left: auto; } #nav li.sfhover ul { left: auto; }

<body>  <ul id="nav">    <li><a href="#Menu=ChildMenu1"  >menu1</a>          <ul >             <li><a href="#">first</a></li>             <li><a href="#">second</a></li>             <li><a href="#">third</a></li>             <li><a href="#">forth</a></li>             <li><a href="#">fifth</a></li>          </ul>    </li>    <li><a href="#Menu=ChildMenu2" >menu2</a>          <ul id="ChildMenu2" class="collapsed">             <li><a href="#">first</a></li>             <li><a href="#">second</a></li>             <li><a href="#">third</a></li>             <li><a href="#">forth</a></li>             <li><a href="#">fifth</a></li>          </ul>    </li>    <li><a href="#Menu=ChildMenu3" >menu3</a>          <ul id="ChildMenu3" class="collapsed">             <li><a href="#">first</a></li>             <li><a href="#">second</a></li>             <li><a href="#">third</a></li>             <li><a href="#">forth</a></li>             <li><a href="#">fifth</a></li>          </ul>    </li>    <li><a href="#Menu=ChildMenu4" >menu4</a>          <ul id="ChildMenu4" class="collapsed">             <li><a href="#">first</a></li>             <li><a href="#">second</a></li>             <li><a href="#">third</a></li>             <li><a href="#">forth</a></li>             <li><a href="#">fifth</a></li>          </ul>    </li>  </ul>  </body>

  var LastLeftID = "";    function DoMenu(emid){    var obj = document.getElementById(emid);       obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");    /*if((LastLeftID!="")&&(emid!=LastLeftID)){ //这一段注释掉以后运行依然正常……       document.getElementById(LastLeftID).className = "collapsed";    }          LastLeftID = emid; */} </script>
js很简单吧，整体感觉还是不错的，很实用。

		自动登录	找回密码
密码			立即注册