符合WEB标准的竖型下拉菜单介绍
符合WEB标准的竖型下拉菜单
<html>
<head>
<title>HorizontalDropDownMenus</title>
<metahttp-equiv="Content-Type"content="text/html;charset=iso-8859-1"/>
<styletype="text/css">
body{font:normal12pxverdana;}
ul{
margin:0;
padding:0;
list-style:none;
width:130px;/*WidthofMenuItems*/
border-bottom:1pxsolid#ccc;
}
ulli{position:relative;}
liul{
position:absolute;
left:129px;/*Set1pxlessthanmenuwidth*/
top:0;
display:none;
}
/*StylesforMenuItems*/
ullia{
display:block;
text-decoration:none;
color:#666;
background:#fff;/*IE6Bug*/
padding:5px;
border:1pxsolid#ccc;
border-bottom:0;
}
/*FixIE.HidefromIEMac*/
*htmlulli{float:left;height:1%;}
*htmlullia{height:1%;}
/*End*/
ullia:hover{color:#E2144A;background:#f9f9f9;}/*HoverStyles*/
liullia{padding:2px5px;}/*SubMenuStyles*/
li:hoverul,li.overul{display:block;}/*Themagic*/
</style>
<scripttype="text/javascript">
//drop_down.js
startList=function(){
if(document.all&&document.getElementById){
navRoot=document.getElementById("nav");
for(i=0;i<navRoot.childNodes.length;i++){
node=navRoot.childNodes[i];
if(node.nodeName=="LI"){
node.onmouseover=function(){
this.className+="over";
}
node.onmouseout=function(){
this.className=this.className.replace("over","");
}
}
}
}
}
window.onload=startList;
</script>
</head>
<body>
<ulid="nav">
<li><ahref="javascript:void(0);">Home</a></li>
<li><ahref="javascript:void(0);">About</a>
<ul>
<li><ahref="#">History</a></li>
<li><ahref="#">Team</a></li>
<li><ahref="#">Offices</a></li>
</ul>
</li>
<li><ahref="javascript:void(0);">Services</a>
<ul>
<li><ahref="#">WebDesign</a></li>
<li><ahref="#">InternetMarketing</a></li>
<li><ahref="#">Hosting</a></li>
<li><ahref="#">DomainNames</a></li>
<li><ahref="#">Broadband</a></li>
</ul>
</li>
<li><ahref="javascript:void(0);">ContactUs</a>
<ul>
<li><ahref="#">UnitedKingdom</a></li>
<li><ahref="#">France</a></li>
<li><ahref="#">USA</a></li>
<li><ahref="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>