为什么我把鼠标放在一个标题的时候后面的同级标题也一同被拉下来了？？

楼主 你这个dom节点构造的有问题，即使是div显示了，不使其他换行，
你也选不到2级菜单，mouseout从a移开 div就隐藏了
楼主在懒人网 看看有合适的没
http://www.lanrentuku.com/js/daohang.html

解决方案 »

  1.   

    2个问题
    1、CSS样式需要改。不然你二级DIV显示后，后面的1级目录位置要变
    2、楼上说的，你的2级目录选不到。因为你鼠标离开一级目录后，2级目录要隐藏。
      

  2.   

    加个table。不要觉得table就是噩梦。固定格式很有用。<!doctype html>
    <html>
    <head>
      <title>top</title>
      <meta http-equiv="content-type" content="text/html;charset=gbk"/>
    <style type="text/css">
    <!--
    .italic {
    font-style:italic
      }#div1{
    height:30px;
    width:60px;
    font-style:italic;
    float:left;
    font-size:25px;
    color:Fuchsia;
    margin-top:0px;
    }
    #div2{
    height:50px;
    width:60px;
    float:left;
    font-style:italic;
    font-size:40px;
    color:aqua;
      }
    #top{ 
    width:100%;  }
    #onediv{  
       height:20px;  
    margin-top:39px;  
    margin-left:0px;
    float:left;
    }  
    #threediv{  
    underline:none;
    font-weight:bold;
    height:20px;
    margin-top:34px;
    margin-left:150px;
    float:left;
    }
    #twodiv{  height:20px;
    margin-top:39px;
    margin-right:50px;
    float:right;
    }-->
    </style>
    </head>
      <body background="img/w.jpg" >
      <div class="italic"><font size="7" color="aqua">欢&nbsp;&nbsp;迎</font></div>
    <div id="top">
    <div id="threediv">
    <table><tr><td   valign='top'>
     <a href="qiye.html" class="menub" id="menu8"target="frame3"
     >园区企业</a>&nbsp;&nbsp;&nbsp;&nbsp;</td><td valign='top' onmouseover="document.getElementById('d1').style.display='';"  
     onmouseout="document.getElementById('d1').style.display='none';">
    <a href="javascript:;" class="menub" id="menu3"target="frame3"
    >
    园区动态</a>&nbsp;&nbsp;&nbsp;&nbsp;
      <div class="sam" id="d1" style="display:none;color:deeppink ;">
        
      <li style="display:inline"><a href="#">动态新闻</a></li></br>
      <li style="display:inline"><a href="#">通知公告</a></li></br>
      <li style="display:inline"><a href="#">专题报道</a></li></br>
    </div>
    </td><td  valign='top' onmouseover="document.getElementById('d2').style.display='';"  
     onmouseout="document.getElementById('d2').style.display='none';">
    <a href="javascript:;" class="menub" id="menu11"target="frame3"
    >招商引资</a>&nbsp;&nbsp;&nbsp;&nbsp;
      <div class="sam" id="d2" style="display:none;color:deeppink;">
        
      <li style="display:inline"><a href="#">投资政策</a></li></br>
      <li style="display:inline"><a href="#">投资环境</a></li></br>
      <li style="display:inline"><a href="#">投资程序</a></li></br>
    </div>
    </td><td  valign='top' onmouseover="document.getElementById('d3').style.display='';"  
     onmouseout="document.getElementById('d3').style.display='none';">
    <a href="javascript:;" class="menub" id="menu9"target="frame3"
    >人才招聘</a>&nbsp;&nbsp;&nbsp;&nbsp;   <div class="sam" id="d3" style="display:none; color:deeppink">
        
      <li style="display:inline"><a href="#">便民服务</a></li></br>
      <li style="display:inline"><a href="#">企业招聘</a></li></br></div>
    </td><td  valign='top' onmouseover="document.getElementById('d4').style.display='';"  
     onmouseout="document.getElementById('d4').style.display='none';">
    <a href="javascript:;" class="menub" id="menu4"target="frame3"
    >联系我们</a>&nbsp;&nbsp;&nbsp;&nbsp;
      <div class="sam" id="d4" style="display:none; color:deeppink">
          <li style="display:inline"><a href="#">联系我们</a></li></br>
      <li style="display:inline"><a href="#">招商热线</a></li></br>
      </div>
    </td></tr></table>
     <div id="twodiv"><script language="javascript" src="date.js"></script></div>
     </div>
      </body>
    </html>
    当然用jquery更容易实现，代码量少。且效果丰富。你搜索下 jquery 多级菜单即可