急：一个菜单栏下拉框的问题

1.这是我的样式
<style type="text/css">#PopUp ul{ 
   list-style:none; 
   font-size:12px; 
   text-decoration:none; 
    margin-top:4px;
  } 
#PopUp ul li{
   float:left; 
   margin-right:-1px; 
   padding:-1px; 
   background:none; 
   border:0px solid #ffeecc; 
   margin-top:4px;
   } 
#PopUp ul li a{ 
   line-height:30px; 
   width:106px; 
   display:block; 
   text-align:center; 
   text-decoration:none; 
   background-color:none;
   } 
#PopUp ul li a:hover{ 
   position:relativae;
   background:#FFF;
   background-color:#FFF;
   text-decoration:none;
   font-weight:bold;
   display:block;
   }
 
#PopUp ul li span{ 
   display:none; 
   border:0px solid #cceeff; 
   background-color:#FFF;
   font-size:14px;
   font-family:微软雅黑;
   position:absolute;
   }
#PopUp ul li a:hover span{ 
   display: block; 
   top:40px;
   left:-2px; 
    text-decoration:none;
font-weight:bold;
position:absolute;
/*position:relativae;
padding:10px; */
margin:0px 0 0;   }
#PopUp ul li dt{ 
   background:none; 
   } 
#PopUp ul li dt a:hover{ 
   /*float:left;*/
   background:#06C;
   margin-top:6px;
   background-color:#06C;
   } 
#PopUp ul li dt a:active 
{
color: #4454AB;
text-decoration:none;
}
</style>
<script type="text/javascript">
function mouseOver()
{
document.getElementById('table1').style.display="block";
}
function mouseOut()
{
document.getElementById('table1').style.display="none";
}
</script>
2.这是我的页面应用的地方
<td colspan="2">
        <li>
            <a href="<%=abpath%>jylc/index.asp"  onmouseover="mouseOver()" onmouseout="mouseOut()"><img src="<%=abpath%>images/top_10.gif" width="106" height="40" alt=""  border=0>
     <span  id="table1"> 
<table><tr><td> 
    <dl> 
     <dt><a href="#">医院简介</a></dt>
                   <dt><a href="#">科室简介</a></dt>
                   <dt><a href="#">专家简介</a></dt>
                   <dt><a href="#">门诊布局</a></dt>
                   <dt><a href="#">就医指南</a></dt>
                   <dt><a href="#">就医流程</a></dt>
                   <dt><a href="#">乘车路线</a></dt>
    </dl> 
    </td></tr></table> 
</span>  
            </a>
            </li>
            </td>
3.大侠不需要评论代码，因为我是帮朋友改。问题是点上面的导航栏然后出现下面的层，但是我一直选不中层。
例如：鼠标放标题一 下面出现联系我们、公司新闻等，但是能出现，就是鼠标点击不上，希望有知道的回复。

解决方案 »

  1.   

    把
    <td colspan="2">
    改为
    <td colspan="2" onmouseover="mouseOver()" onmouseout="mouseOut()">把
    <a href="<%=abpath%>jylc/index.asp" onmouseover="mouseOver()" onmouseout="mouseOut()">
    改为
    <a href="<%=abpath%>jylc/index.asp">
      

  2.   

    大侠，还是原来的样子。你再帮看看是哪里有问题,页面时<div><ul><table><tr><td><li></li></td></tr></table></ul></div>这样的结构，谢谢了。
      

  3.   

    晕死我，你脱离鼠标区域了呀，就已经执行到mouseout了1:  <a href="<%=abpath%>jylc/index.asp" onmouseover="mouseOver()" onmouseout="mouseOut()">
    改为：<a href="<%=abpath%>jylc/index.asp" onmouseover="mouseOver()">
    2：<span id="table1"   onmouseout="mouseOut()">  PS:你这个DOM结构可够混乱的，改改吧
      

  4.   

    好像有效果了，经过您的指点，但是现在鼠标放在导航栏，导航栏直接被下面出现的span顶上去了，下面也顶下去了。
      

  5.   

    呃,你那混乱的DOM结构我实在是理不清，写了个给你做参考吧，代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>导航菜单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
    .menu{width:100%;}
    .menu ul{float:left;list-style:none;width:100%;}
    .menu li{float:left;list-style:none;text-align:left;margin-left:10px;width:106px;height:40px;position:relative;}
    .menu li span{float:left;width:106px;display:none;background:#fff; position:absolute;border:1px solid #bfbfbf;left:0;top:40px;/*因为position的定义,实际上该区域原点仍为父级标签的原点,因此设置一个top偏离*/}
    .menu li span a{float:left;width:100%;color: #4454AB;text-align:center;height:28px;line-height:28px;text-decoration:none;}
    .menu li span a:hover{color: #ff9900;}
    </style>
    <script type="text/javascript">function MenuEventListen(){
        var _menu=document.getElementById("menu");
        var _li=_menu.getElementsByTagName("li");
        for(i=0;i<_li.length;i++)
        {
            _li[i].onmouseover=function(){
                this.getElementsByTagName('span')[0].style.display='block';
            };
            _li[i].onmouseout=function(){
                this.getElementsByTagName('span')[0].style.display='none';
            };
        }
    }
    document.onreadystatechange = function(){   
        if(document.readyState=="complete")   
        {   
            MenuEventListen();
        } 
    }</script>
    </head>
    <body>
    <div id="menu" class="menu">
        <ul>
            <li>
                <a href="#"><img src="1.gif" width="106px" height="40px" alt="" border=0/></a>
                <span><a href="#">医院简介</a><a href="#">科室简介</a><a href="#">专家简介</a><a href="#">门诊布局</a><a href="#">就医指南</a><a href="#">就医流程</a><a href="#">乘车路线</a></span>
            </li>
            <li>
                <a href="#"><img src="1.gif" width="106px" height="40px" alt="" border=0/></a>
                <span><a href="#">医院简介2</a><a href="#">科室简介2</a><a href="#">专家简介2</a><a href="#">门诊布局2</a><a href="#">就医指南2</a><a href="#">就医流程2</a><a href="#">乘车路线2</a></span>
            </li>
        </ul>
    </div>  <div>这里是其他内容，这里是其他内容</div>
    </body>
    </html>
      

  6.   

    朋友让我必须在他的那个架构上改，我现在做手机开发，也是对css不太精通，谢谢你，朋友，晚上回家再给他试试。