`

二级联动菜单

XHTMLHTML 
阅读更多
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>nav</title> 
<script type=text/javascript> 
<!--  
var LastLeftID = "";  
 
function DoMenu(emid){  
    var obj = document.getElementById(emid);   
    obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");  
    if((LastLeftID!="")&&(emid!=LastLeftID)){  
        document.getElementById(LastLeftID).className = "collapsed";  
    }  
        LastLeftID = emid;  
}  
--> 
</script> 
 
<style type="text/css"> 
<!--  
body {  
font-family: Arial,Verdana,Helvetica,sans-serif;  
font-size:12px;  
}  
#nav {  
width:180px;  
list-style-type: none;  
text-align:left;  
margin:10px 0 0 10px;  
}  
 
#nav a {  
width: 180px;   
display: block;  
padding:5px 0 5px 20px;  
}  
 
#nav li {  
background:#cccccc;  
border-bottom:#ffffff 1px solid;  
float:left;  
}  
 
#nav li a:hover{  
background:#cc0000;  
}  
 
#nav a:link  {  
color:#666;  
text-decoration:none;  
}  
 
#nav a:visited  {  
color:#666;  
text-decoration:none;  
}  
 
#nav a:hover  {  
color:#ffffff;  
text-decoration:none;  
font-weight:bold;  
}  
 
#nav li ul {  
list-style:none;  
text-align:left;  
padding:0;  
}  
 
#nav li ul li{   
background: #ebebeb;  
}  
 
#nav li ul a{  
padding-left:20px;  
width:180px;  
}  
 
#nav li ul a:link  {  
color:#666;  
text-decoration:none;  
}  
#nav li ul a:visited  {  
color:#666;  
text-decoration:none;  
}  
#nav li ul a:hover {  
color:#f3f3f3;  
text-decoration:none;  
font-weight:normal;  
background:#cc0000;  
}  
 
#nav li:hover ul {  
left: auto;  
}  
#nav li.sfhover ul {  
left: auto;  
}  
#content {  
clear: left;   
}  
#nav ul.collapsed {  
display: none;  
}  
--> 
</style> 
</head> 
<body> 
<ul id="nav"> 
    <li><a href="#Menu=ChildMenu1"  onclick="DoMenu('ChildMenu1')">menu1</a> 
         <ul id="ChildMenu1" class="collapsed"> 
             <li><a href="#">first</a></li> 
             <li><a href="#">second</a></li> 
             <li><a href="#">third</a></li> 
             <li><a href="#">forth</a></li> 
             <li><a href="#">fifth</a></li> 
         </ul> 
    </li> 
    <li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">menu2</a> 
         <ul id="ChildMenu2" class="collapsed"> 
             <li><a href="#">first</a></li> 
             <li><a href="#">second</a></li> 
             <li><a href="#">third</a></li> 
             <li><a href="#">forth</a></li> 
             <li><a href="#">fifth</a></li> 
         </ul> 
    </li> 
    <li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">menu3</a> 
         <ul id="ChildMenu3" class="collapsed"> 
             <li><a href="#">first</a></li> 
             <li><a href="#">second</a></li> 
             <li><a href="#">third</a></li> 
             <li><a href="#">forth</a></li> 
             <li><a href="#">fifth</a></li> 
         </ul> 
    </li> 
    <li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">menu4</a> 
         <ul id="ChildMenu4" class="collapsed"> 
             <li><a href="#">first</a></li> 
             <li><a href="#">second</a></li> 
             <li><a href="#">third</a></li> 
             <li><a href="#">forth</a></li> 
             <li><a href="#">fifth</a></li> 
         </ul> 
    </li> 
</ul> 
</body> 
</html> 
分享到：
| 动态加载js
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics