关于导航条的显示与隐藏

<html>
 <head>
  <title>使用CSS定位</title>
<style>
<!--
.table1{
width:1024px;
height:100%;
background:#f3f3f3
}
#div1{
position:absolute;
width:110px;height:210px;
z-index:1;
background:green;
color:white;
        visibility: none;
}
:link{color:white}
:visited{color:white}
:active{color:white}
:hover{color:yellow;font-weight:bolder;}
a{text-decoration:none}
-->
</style>
 </head>
 <body topmargin="0px">
<script language="javascript" type="text/javascript">
function over()
{
document.all["div1"].style.visibility="visible";
}
function out()
{
document.all["div1"].style.display="none";
}
</script>
  <table class="table1"  align="center"  cellspacing="0" frame="vsides" rules="none">
   <tr height="70px"><td colspan="2" style="color:green;font:bolder 22 黑体">音乐排行榜！你可以没有动人的嗓音，但你不能缺少动人的旋律！</td></tr>
   <tr height="25px">
    <td colspan="2" bgcolor="green">
<table width="1024px" style="color:white">
 <tr><td width="60px" height="25px" align="center">首页</td>
     <td width="50px" valign="middle" >榜单
       <div id="div1" onMouseOver="over()" onMouseOut="out()">
 <p>-><a href="#">新歌TOP100</a></p>
 <p>-><a href="#">歌曲TOP100</a></p>
 <p>-><a href="#">歌手TOP100</a></p>
 <p>-><a href="#">中文金曲榜</a></p>
 <p>-><a href="#">欧美金曲榜</a></p>
 <p>-><a href="#">日韩流行风</a></p>
</div>
             </td>
     <td>音乐分类</td></tr>
     </table>
    </td>
   </tr>
   <tr><td></td><td></td></tr>
   <tr><td></td><td></td></tr>
  </table>
 </body>
</html>
我的代码如上，拜托各位前辈帮我看看有什么错误，我想让它在鼠标一上去就显示div1，离开时就隐藏，按我这么做，得到了相反效果，但我看不出拿错了，麻烦一下！

解决方案 »

  1.   


    <html>
     <head>
      <title>使用CSS定位</title>
    <style>
    <!--
    .table1{
    width:1024px;
    height:100%;
    background:#f3f3f3
    }
    #div1{
    position:absolute;
    width:110px;height:210px;
    z-index:1;
    background:green;
    color:white;
    display:none;
    }
    :link{color:white}
    :visited{color:white}
    :active{color:white}
    :hover{color:yellow;font-weight:bolder;}
    a{text-decoration:none}
    -->
    </style>
     </head>
     <body topmargin="0px">
    <script language="javascript" type="text/javascript">
    function over()
    {
    document.getElementById('div1').style.display="block";
    }
    function out()
    {
    document.getElementById('div1').style.display="none";
    }
    </script>
      <table class="table1" align="center" cellspacing="0" frame="vsides" rules="none">
      <tr height="70px"><td colspan="2" style="color:green;font:bolder 22 黑体">音乐排行榜！你可以没有动人的嗓音，但你不能缺少动人的旋律！</td></tr>
      <tr height="25px">
      <td colspan="2" bgcolor="green">
    <table width="1024px" style="color:white">
    <tr><td width="60px" height="25px" align="center">首页</td>
    <td width="50px" valign="middle"  onMouseOver="over()" onMouseOut="out()">榜单
    <div style="position:relative;">
    <div id="div1">
    <p>-><a href="#">新歌TOP100</a></p>
    <p>-><a href="#">歌曲TOP100</a></p>
    <p>-><a href="#">歌手TOP100</a></p>
    <p>-><a href="#">中文金曲榜</a></p>
    <p>-><a href="#">欧美金曲榜</a></p>
    <p>-><a href="#">日韩流行风</a></p>
    </div>
    </div>
      </td>
    <td>音乐分类</td></tr>
      </table>
      </td>
      </tr>
      <tr><td></td><td></td></tr>
      <tr><td></td><td></td></tr>
      </table>
     </body>
    </html>楼主参考下
      

  2.   

    恩，确实是这样，但是我觉得应该div1上还要加上时间
    <div id="div1" onMouseOver="over()" onMouseOut="out()" >