|zyciis| 200分 求一个JS二级菜单 第二贴 xiaojing7 给的菜单有问题不像我要的那个

呵呵http://www.scriptlover.com/upload/0807061307096147.html

解决方案 »

  1.   

    http://www.scriptlover.com/upload/0807061307096147.html
    －－－－－－－－－－－－－－－
    菜单都是坚着的有没有横的谢谢
      

  2.   

    树和横就只是一个CSS样式的问题
      

  3.   

    <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
    <head>
    <title>横向下拉菜单</title>
    <style type="text/css">
    <!--
    * {margin:0;padding:0;border:0px none;}
    body {
     font-family: arial, 宋体, serif;
            font-size:12px;
    }
    #nav {
      height: 24px;  list-style-type: none;  padding-left:200px; 
    line-height:24px;overflow:hidden;background:#999;
    }
    #nav a {
     display: block; width: 80px; text-align:center;
    }
    #nav a:link  {
     color:#EEE; text-decoration:none;
    }
    #nav a:visited  {
     color:#EEE;text-decoration:none;
    }
    #nav a:hover  {
     color:#FFF;text-decoration:none;font-weight:bold;background:#CCC;
    }
    #nav li {
     float: left; width: 80px;
    }#nav li ul {
     line-height: 24px;  
     list-style-type: none;
     text-align:left;
     left: -999px; 
     width: 520px; //position: absolute;
     background:#CCC; 注意
    }
    #nav li ul li{
      float: left;width: 80px; //float就是子菜单横向的关键
    }#nav li ul a{
     display: block; width: 65px;text-align:left;padding-left:15px;
    }
    #nav li ul a:link  {
     color:#F1F1F1; text-decoration:none;
    }
    #nav li ul a:visited  {
     color:#F1F1F1;text-decoration:none;
    }
    #nav li ul a:hover  {
     color:#FFF;text-decoration:none;font-weight:normal;background:#C00;
    }
    #nav li:hover ul {
     left:25%;
    }
    #nav li.sfhover ul {
     left:25%;
    }
    #content {
     clear: left; 
    }-->
    </style>
    <script type=text/javascript><!--//--><![CDATA[//><!--
    function menuFix() {
     var sfEls = document.getElementById("nav").getElementsByTagName("li");
     for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
      this.className+=(this.className.length>0? " ": "") + "sfhover";
      }
      sfEls[i].onMouseDown=function() {
      this.className+=(this.className.length>0? " ": "") + "sfhover";
      }
      sfEls[i].onMouseUp=function() {
      this.className+=(this.className.length>0? " ": "") + "sfhover";
      }
      sfEls[i].onmouseout=function() {
      this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 
    "");
      }
     }
    }
    window.onload=menuFix;
    //--><!]]></script>
    </head>
    <body><ul id="nav">
    <li><a href="#">菜单一</a>
     <ul>
     <li><a href="#">菜单一</a></li>
     <li><a href="#">菜单一</a></li>
     <li><a href="#">菜单一</a></li>
     <li><a href="#">菜单一</a></li>
     <li><a href="#">菜单一</a></li>
     <li><a href="#">菜单一</a></li>
     </ul>
    </li>
    <li><a href="#">菜单二</a>
     <ul>
     <li><a href="#">菜单二</a></li>
     <li><a href="#">菜单二</a></li>
     <li><a href="#">菜单二</a></li>
     <li><a href="#">菜单二</a></li>
     <li><a href="#">菜单二</a></li>
     </ul>
    </li>
    <li><a href="#">菜单三</a>
     <ul>
     <li><a href="#">菜单三</a></li>
     <li><a href="#">菜单三</a></li>
     <li><a href="#">菜单三</a></li>
     <li><a href="#">菜单三</a></li>
     <li><a href="#">菜单三</a></li>
     </ul>
    </li>
    <li><a href="#">菜单四</a>
     <ul>
     <li><a href="#">菜单四</a></li>
     <li><a href="#">菜单四</a></li>
     <li><a href="#">菜单四</a></li>
     <li><a href="#">菜单四</a></li>
     <li><a href="#">菜单四</a></li>
     </ul>
    </li>
    <li><a href="#">菜单五</a>
     <ul>
     <li><a href="#">菜单五</a></li>
     <li><a href="#">菜单五</a></li>
     <li><a href="#">菜单五</a></li>
     <li><a href="#">菜单五</a></li>
     <li><a href="#">菜单五</a></li>
     </ul>
    </li>
    <li><a href="#">菜单六</a>
     <ul>
     <li><a href="#">菜单六</a></li>
     <li><a href="#">菜单六</a></li>
     <li><a href="#">菜单六</a></li>
     <li><a href="#">菜单六</a></li>
     <li><a href="#">菜单六</a></li>
     </ul>
    </li>
    </ul>
    </div>
    </body>
    </html>
      

  4.   

    Javascript多级菜单
    http://www.ccscript.cn/Content/3/231.aspxJavascript多级菜单
    http://www.ccscript.cn/Content/3/231.aspxJavascript滑动菜单
    http://www.ccscript.cn/Content/3/242.aspxJavascript滑动菜单
    http://www.ccscript.cn/Content/3/241.aspx