用脚本如何实现子菜单的显示?

去下个jk_10000工具箱里面就有了,帮你帖出其中一个
到这里下载
http://download.csdn.net/user/jk_10000
<HTML><HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<STYLE type="text/css">
.menuUl {
width:150px;border:#888888 1px solid;position:absolute;left:0px;top:17px;display:none;
}
.menuLi {
width:150px;border:#888888 1px solid;position:relative;background-color:white;height:18px;display:inline;
}
.menuUl .menuUl {
left:149px;top:2px;
}
.menuUl .menuLi {
display:block;
}.menuLi A{
color:#0044ff;text-decoration:none;font:14px verdana;
}
.menuLi A:hover {
background-color:#f0d0d0;
}
</STYLE>
<SCRIPT language=javascript src="Menu_MouseFun.js"></SCRIPT>
</head><BODY>
<div style="font-size:10pt;">
注1：部分代码来自gu1dai(异域苍穹......追夢人)：http://community.csdn.net/Expert/topic/4123/4123998.xml?temp=.4086878<br/>
注2：TopMenu与LeftMenu可以通过改变css来互换<br/>
<br/>
注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。<br/>
注-----：作者JK：<a href="mailTo:[email protected]?subject=About%20TopMenu/LeftMenu">[email protected]</a><br/>
<hr/>
</div>
<div onmouseover="Menu_mouseover(event,this);" onmouseout="Menu_mouseout(event,this);" >
  <div class="menuLi" >
    <A href="#">Services</A>
    <div class="menuUl" >
      <div class="menuLi" >
        <A href="#">Web Design</A>
        <div class="menuUl" >
          <div class="menuLi" ><A href="#">Web Design->sub</A></div>
          <div class="menuLi" ><A href="#">Web Design->sub2</A></div>
          <div class="menuLi" >
            <A href="#">Web Design->sub3</A>
            <div class="menuUl" >
              <div class="menuLi" ><A href="#">Web Design->3</A></div>
              <div class="menuLi" ><A href="#">Web Design->3</A></div>
              <div class="menuLi" ><A href="#">Web Design->3</A></div>
            </div>
          </div>
        </div>
      </div>
      <div class="menuLi" ><A href="#">Internet Marketing</A></div>
      <div class="menuLi" ><A href="#">Hosting</A></div>
      <div class="menuLi" ><A href="#">Domain Names</A></div>
      <div class="menuLi" ><A href="#">Broadband</A></div>
    </div>
  </div>
  <div class="menuLi" >
    <A href="#">Services</A>
    <div class="menuUl" >
      <div class="menuLi" >
        <A href="#">Web Design</A>
        <div class="menuUl" >
          <div class="menuLi" ><A href="#">Web Design->sub</A></div>
          <div class="menuLi" ><A href="#">Web Design->sub2</A></div>
          <div class="menuLi" >
            <A href="#">Web Design->sub3</A>
            <div class="menuUl" >
              <div class="menuLi" ><A href="#">Web Design->3</A></div>
              <div class="menuLi" ><A href="#">Web Design->3</A></div>
              <div class="menuLi" ><A href="#">Web Design->3</A></div>
            </div>
          </div>
        </div>
      </div>
      <div class="menuLi" ><A href="#">Internet Marketing</A></div>
      <div class="menuLi" ><A href="#">Hosting</A></div>
      <div class="menuLi" ><A href="#">Domain Names</A></div>
      <div class="menuLi" ><A href="#">Broadband</A></div>
    </div>
  </div>
</div><select><option>fdsafdsafdsa fdsa fdsa fdsa fdsafdsafdsa fds fdsa fdsafdsafdsafds</option></select></BODY></HTML>
自己写了一个简单，不知道是不你需要的！
   <html>
   <head>
     <title>
       javascript
     </title>
   <style type="text/css">
     #menu{
        border:1 solid red;
        height:50;
        width:380;
     }

       li{
         float:left;
         border-right:1 solid gray;
         border-left:1 solid gray;
         padding-left:5;
         padding-right:5;
      }
     #subcatalog{
        clear:left;
        border:1 solid red;
        width:333;
     }


   </style>      </head>
   <body>

       <div id=menu>
          <ul>
             <li id="user">用户管理</li><li id="board">板块管理</li><li id="affiche">公告管理</li><li id="msg">短信息</li>
             <li id="subcatalog"></li>
          </ul>
       </div>
     
     <script type="text/javascript">
      var user=document.getElementById("user");
      var board=document.getElementById("board");
      var affiche=document.getElementById("affiche");
      var msg=document.getElementById("msg");

      var subuser=new Array("添加用户","修改用户","删除用户");
      var subboard=new Array("添加板块","修改板块","删除板块");
      var subaffiche=new Array("添加公告","修改公告","删除公告");
      var submsg=new Array("添加信息","修改信息","删除信息");

      var subcontent=document.getElementById("subcatalog");

      user.onmouseover=function(){
          subcontent.innerText=arrayToString(subuser);
      }

      user.onmouseout=function(){
        subcontent.innerText="";
       }

      board.onmouseover=function(){
        subcontent.innerText=arrayToString(subboard);
      }

      board.onmouseout=function(){
        subcontent.innerText="";
       }

      affiche.onmouseover=function(){
         subcontent.innerText=arrayToString(subaffiche);
      }

            affiche.onmouseout=function(){
        subcontent.innerText="";
       }
      msg.onmouseover=function(){
         subcontent.innerText=arrayToString(submsg);
      }
       msg.onmouseout=function(){
        subcontent.innerText="";
       }

      function arrayToString(array){
      var text="";
          for(var i=0;i<array.length;i++){
              temp=text;
              text=temp+"|"+array[i];
              }
              return text;
      }

   </script>
     
   </body>
</html>

调试易

用脚本如何实现子菜单的显示?

解决方案 »