<SCRIPT language=javascript >function mouseOverFun(obj)
{
var toLi=event.toElement;
if(toLi==obj) return false;
if(toLi.tagName=="A" || toLi.tagName=="UL") toLi=toLi.parentElement;
if(toLi.children[1]) toLi.children[1].style.display="block";
}function onmouseOutFun(obj)
{
var fromLi=event.fromElement;
var eventToElement=event.toElement;
if(fromLi==obj) return false;
if(fromLi.tagName=="A" || fromLi.tagName=="UL") fromLi=fromLi.parentElement;
if(fromLi.contains(eventToElement)) return false;
if(fromLi.children[1]) fromLi.children[1].style.display="none";
var maxLevel=10;
while( maxLevel-- > 0)
{
fromLi=fromLi.parentElement.parentElement;
if(fromLi.contains(obj) || (fromLi.tagName!="LI" && fromLi.tagName!="TD") || fromLi.contains(eventToElement))
break;
fromLi.children[1].style.display="none";
}
}
</SCRIPT>
<STYLE type="text/css">
body {
margin: 0px;
background-color: #C8C8C8;
}
UL {
PADDING: 0px;
MARGIN: 0px;
WIDTH: 100px;
BORDER: #ccc 0px solid;
DISPLAY:none;
POSITION: absolute;
LEFT: 130px;
TOP: 0px;
text-align: center;
vertical-align: middle;
}
LI {
BACKGROUND-COLOR:#E7E7E7;
PADDING: 0px;
MARGIN: 0px;
WIDTH: 130px;
BORDER: 0 solid;
POSITION: relative;/*relative;*/
height: 20px;
vertical-align: top;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
white-space: normal;
clear: both;
float: none;
}.menuA{
COLOR:#034B83; TEXT-DECORATION: none; WIDTH:100%; HEIGHT:20px;
}.menuA:hover {
BACKGROUND: #E7E7E7; COLOR: #e2144a;
}.menuLevel0{
POSITION: relative;
}
.menuLevel1{
background:#E7E7E7; TOP: 0px;
}
</style><table width="180" height="131" border=0 cellspacing=0 onmouseover="mouseOverFun(this);" onmouseout="onmouseOutFun(this);" style="font-family: Tahoma;color: #606760;text-decoration: none;font-size: 8pt;">
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
</table>
{
var toLi=event.toElement;
if(toLi==obj) return false;
if(toLi.tagName=="A" || toLi.tagName=="UL") toLi=toLi.parentElement;
if(toLi.children[1]) toLi.children[1].style.display="block";
}function onmouseOutFun(obj)
{
var fromLi=event.fromElement;
var eventToElement=event.toElement;
if(fromLi==obj) return false;
if(fromLi.tagName=="A" || fromLi.tagName=="UL") fromLi=fromLi.parentElement;
if(fromLi.contains(eventToElement)) return false;
if(fromLi.children[1]) fromLi.children[1].style.display="none";
var maxLevel=10;
while( maxLevel-- > 0)
{
fromLi=fromLi.parentElement.parentElement;
if(fromLi.contains(obj) || (fromLi.tagName!="LI" && fromLi.tagName!="TD") || fromLi.contains(eventToElement))
break;
fromLi.children[1].style.display="none";
}
}
</SCRIPT>
<STYLE type="text/css">
body {
margin: 0px;
background-color: #C8C8C8;
}
UL {
PADDING: 0px;
MARGIN: 0px;
WIDTH: 100px;
BORDER: #ccc 0px solid;
DISPLAY:none;
POSITION: absolute;
LEFT: 130px;
TOP: 0px;
text-align: center;
vertical-align: middle;
}
LI {
BACKGROUND-COLOR:#E7E7E7;
PADDING: 0px;
MARGIN: 0px;
WIDTH: 130px;
BORDER: 0 solid;
POSITION: relative;/*relative;*/
height: 20px;
vertical-align: top;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
white-space: normal;
clear: both;
float: none;
}.menuA{
COLOR:#034B83; TEXT-DECORATION: none; WIDTH:100%; HEIGHT:20px;
}.menuA:hover {
BACKGROUND: #E7E7E7; COLOR: #e2144a;
}.menuLevel0{
POSITION: relative;
}
.menuLevel1{
background:#E7E7E7; TOP: 0px;
}
</style><table width="180" height="131" border=0 cellspacing=0 onmouseover="mouseOverFun(this);" onmouseout="onmouseOutFun(this);" style="font-family: Tahoma;color: #606760;text-decoration: none;font-size: 8pt;">
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
</table>
谢谢你的回答我想要的结果是 当鼠标放到主菜单上时,自动弹出来的二级菜单固定在一个位置出现,而不是随着主菜单的位置变化
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<SCRIPT language=javascript >function mouseOverFun(obj)
{
var toLi=event.toElement;
if(toLi==obj) return false;
if(toLi.tagName=="A" || toLi.tagName=="UL") toLi=toLi.parentElement;
if(toLi.children[1]) toLi.children[1].style.display="block";
}function onmouseOutFun(obj)
{
var fromLi=event.fromElement;
var eventToElement=event.toElement;
if(fromLi==obj) return false;
if(fromLi.tagName=="A" || fromLi.tagName=="UL") fromLi=fromLi.parentElement;
if(fromLi.contains(eventToElement)) return false;
if(fromLi.children[1]) fromLi.children[1].style.display="none";
var maxLevel=10;
while( maxLevel-- > 0)
{
fromLi=fromLi.parentElement.parentElement;
if(fromLi.contains(obj) || (fromLi.tagName!="LI" && fromLi.tagName!="TD") || fromLi.contains(eventToElement))
break;
fromLi.children[1].style.display="none";
}
}
</SCRIPT>
<STYLE type="text/css">
body {
margin: 0px;
background-color: #C8C8C8;
}
UL {
PADDING: 0px;
MARGIN: 0px;
WIDTH: 100px;
BORDER: #ccc 0px solid;
DISPLAY:none;
POSITION: absolute;
LEFT: 130px;
TOP: 0px;
text-align: center;
vertical-align: middle;
}
LI {
BACKGROUND-COLOR:#E7E7E7;
PADDING: 0px;
MARGIN: 0px;
WIDTH: 130px;
BORDER: 0 solid;
POSITION: relative;/*relative;*/
height: 20px;
vertical-align: top;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
white-space: normal;
clear: both;
float: none;
}.menuA{
COLOR:#034B83; TEXT-DECORATION: none; WIDTH:100%; HEIGHT:20px;
}.menuA:hover {
BACKGROUND: #E7E7E7; COLOR: #e2144a;
}.menuLevel0{
POSITION: relative;
}
.menuLevel1{
background:#E7E7E7; LEFT: -130px; TOP: 0px;
}
</STYLE>
<style type="text/css">
<!--
.style2 {color: #FFFFFF}
-->
</style>
</head>
<body leftmargin="0" rightmargin="0" bottommargin="0" bgcolor="#C8C8C8">
<table><tr><td width=1000 align="center"><table width="200" height="131" border=0 cellspacing=0 onmouseover="mouseOverFun(this);" onmouseout="onmouseOutFun(this);" style="font-family: Tahoma;color: #606760;text-decoration: none;font-size: 8pt;">
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td>
</tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td>
</tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td>
</tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td>
</tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td>
</tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td>
</tr>
</table></td></tr></table>'===================也就是说
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>这几个项目出现的位置都是一样的
把要显示的ui里的innerHTML设置到span的innerHTML中