急：一个菜单栏下拉框的问题
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.大侠不需要评论代码，因为我是帮朋友改。问题是点上面的导航栏然后出现下面的层，但是我一直选不中层。
例如：鼠标放标题一 下面出现联系我们、公司新闻等，但是能出现，就是鼠标点击不上，希望有知道的回复。
[解决办法]
把
<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">
[解决办法]
晕死我，你脱离鼠标区域了呀，就已经执行到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结构可够混乱的，改改吧
[解决办法]
呃,你那混乱的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>
