<html>
<head>
<title>非定位CSS+Js下拉菜单</title>
<style>
#menu{
position:absolute;
font-family:sans-serif;
font-size:9pt;
}
#menuli{
float:left;
list-style-type:none;
width:102px;
background-color:skyblue;
border:1pxsolid#0066cc;
text-indent:0px;
margin-left:3px;
}
#menulia{
color:blue;
text-decoration:none;
width:100%;
display:block;
}
#menulia:hover{
color:white;
}
#menuliul{
background-color:skyblue;
margin:0px;
padding:0px;
}
#menuliulli{
padding:0px;
margin:0px;
float:none;
list-style-type:none;
width:100px;
text-indent:0px;
border:none;
}
#menuliullia{
color:black;
text-decoration:none;
}
#menuliullia:hover{
color:black;
background-color:aqua;
}</style>
<scriptlanguage="javascript"type="text/javascript">
vart=false,current;
functionSetupMenu(){
if(!document.getElementsByTagName)return;
items=document.getElementsByTagName("li");
for(i=0;i<items.length;i++){
if(items[i].className!="menu")continue;
thelink=findChild(items[i],"A");
thelink.onmouseover=ShowMenu;
thelink.onmouseout=StartTimer;
if(ul=findChild(items[i],"UL")){
ul.style.display="none";
for(j=0;j<ul.childNodes.length;j++){
ul.childNodes[j].onmouseover=ResetTimer;
ul.childNodes[j].onmouseout=StartTimer;
}
}
}
}
functionfindChild(obj,tag){
cn=obj.childNodes;
for(k=0;k<cn.length;k++){
if(cn[k].nodeName==tag)returncn[k];
}
returnfalse;
}
functionShowMenu(e){
if(!e)vare=window.event;
thislink=(e.target)?e.target:e.srcElement;
ResetTimer();
if(current)HideMenu(current);
thislink=thislink.parentNode;
current=thislink;
ul=findChild(thislink,"UL");
if(!ul)return;
ul.style.display="block";
}
functionHideMenu(thelink){
ul=findChild(thelink,"UL");
if(!ul)return;
ul.style.display="none";
}
functionResetTimer(){
if(t)window.clearTimeout(t);
}
functionStartTimer(){
t=window.setTimeout("HideMenu(current)",200);
}
window.onload=SetupMenu;
</script>
</head>
<body>
<h1>MenuTest</h1>
<ulid="menu">
<liclass="menu"><ahref="#">Home</a></li>
<liclass="menu"><ahref="#">Products</a>
<ul>
<li><ahref="#">Sub-item1</a></li>
<li><ahref="#">Sub-item2</a></li>
</ul>
</li>
<liclass="menu"><ahref="#">Support</a>
<ul>
<li><ahref="#">Sub-item1</a></li>
<li><ahref="#">Sub-item2</a></li>
</ul>
</li>
<liclass="menu"><ahref="#">Employment</a>
<ul>
<li><ahref="#">Sub-item1</a></li>
<li><ahref="#">Sub-item2</a></li>
</ul>
</li>
<liclass="menu"><ahref="#">ContactUs</a>
<ul>
<li><ahref="#">Sub-item1</a></li>
<li><ahref="#">Sub-item2</a></li>
</ul>
</li>
</ul>
</body>
</html>
|
Copyright©2000-2022