如何用JS制作(至少)三级的下拉式(导航)菜单?(支持IE\Netscape等其它浏览器)

Question

学用=常用...呀.打错字了,都没看到!

Answer 1

怎么无人参与呢?我也想知道!

Answer 2

<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: #ffffff;
}
UL {
PADDING: 0px;
MARGIN: 0px;
WIDTH: 150px;
BORDER: #ccc 1px solid;
DISPLAY:none;
POSITION: absolute;
LEFT: 149px;
TOP: 0px;
text-align: center;
vertical-align: middle;
}
LI {
BACKGROUND-COLOR:#ffffff;
PADDING: 0px;
MARGIN: 0px;
WIDTH: 150px;
BORDER: 0.5 solid;
POSITION: relative;
height: 20px;
vertical-align: middle;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
white-space: normal;
clear: both;
float: none;
}.menuA{
COLOR: #777;  TEXT-DECORATION: none; WIDTH:100%; HEIGHT:20px;
}.menuA:hover {
BACKGROUND: #F1F1F1; COLOR: #e2144a;
//#d9d9f9
}.menuLevel0{
PADDING: 0px; MARGIN: 0px;WIDTH: 100px; BORDER: 1px none #ccc; POSITION: relative;
}
.menuLevel1{
LEFT: 0px;  TOP: 20px;
}
</STYLE><table  onmouseover="mouseOverFun(this);" onmouseout="onmouseOutFun(this);" border=0 cellspacing=0  style="font-family: Tahoma;color: #606760;text-decoration: none;font-size: 8pt;">
<tr>
<td align="center" valign="middle" class="menuLevel0">
<A class="menuA" href="#">便民服务</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>
<LI><A class="menuA" href="#">糖尿病友同照护</A>
<LI><A class="menuA" href="#">社区健康管道</A>
</UL>
    <LI><A class="menuA" href="#">疾病管制类</A>
<UL>
<LI><A class="menuA" href="#">取药卫生</A>
<LI><A class="menuA" href="#">营养卫生</A>
<LI><A class="menuA" href="#">外籍劳工健康管理</A>
</UL>
    <LI><A class="menuA" href="#">其他</A>
<UL>
<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>
</UL>
</td><td align="center" valign="middle" class="menuLevel0">
<A class="menuA" href="#">网站导览</A> 
</td>
<td align="center" valign="middle" class="menuLevel0">
<A class="menuA" href="#">医疗资源</A> 
<UL class="menuLevel1">
<LI><A class="menuA" href="#">精神健康机构</A>
<UL>
<LI><A class="menuA" href="#">社区健康中心</A>
<LI><A class="menuA" href="#">健康之家</A>
</UL>
<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>
<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>
<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>
<td align="center" valign="middle" class="menuLevel0">
<A class="menuA" href="#">健康保健</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><td align="center" valign="middle" class="menuLevel0">
<A class="menuA" href="#">健康小百科</A> 
</td><td align="center" valign="middle" class="menuLevel0">
<A class="menuA" href="#">宣导影片</A> 
</td><td align="center" valign="middle" class="menuLevel0">
<A class="menuA" href="#">卫生网站</A> 
</td><td align="center" valign="middle" class="menuLevel0">
<A class="menuA" href="#">本局介绍</A> <td align="center" valign="middle" class="menuLevel0">
<A class="menuA" href="#">本局徵才</A> 
</td>
</tr>
</table>
</td>
  </tr>
  <tr> 
  </tr>
</table>一种比较简单,但不合所有浏览器的代码!(DVBBS的菜单能在netscape中使用呢)