二级菜单效果（2）

最新推荐文章于 2022-10-15 00:26:11 发布

iteye_21028

最新推荐文章于 2022-10-15 00:26:11 发布

阅读量106

点赞数

分类专栏： javascript 文章标签： JavaScript XHTML CSS HTML ViewUI

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!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=utf-8" />
<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">
<!--
ul,li,a{margin:0;padding:0;}

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"  οnclick="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" οnclick="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" οnclick="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" οnclick="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>