伸缩的两级菜单，折叠|展开

答案：<!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>伸缩的两级菜单</title>
<script language="javascript">
window.onload=function(){
var oUl=document.getElementById("listUL");
var aLi=oUl.childNodes;
var oA;
for(var i=0;i<aLi.length;i++){
if(aLi[i].tagName=="LI"&&aLi[i].getElementsByTagName("ul").length){
oA=aLi[i].firstChild;
oA.onclick=change;}}
}
function change(){
var oSecondDiv=this.parentNode.getElementsByTagName("ul")[0];
if(oSecondDiv.className="myHide")
    oSecondDiv.className="myShow";
	else
	oSecondDiv.className="myHide";}
</script>
<style type="text/css">
<!--
#navigation ul {
	list-style-image: none;
	margin: 0px;
	padding: 0px;
}
#navigation ul li {
	border: 1px solid #ED9F9F;
}
#navigation ul li a {
	display: block;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 0.5em;
	text-decoration:none;
	border-top-width: 12px;
	border-left-width: 1px;
	border-top-style: solid;
	border-left-style: solid;
	border-top-color: #711515;
	border-left-color: #711515;
}
#navigation ul li a:link,#navigation ul li a:visited{
	color: #FFFFFF;
	background-color: #c11136;
}
#navigation ul li a:hover {
	color: #FFFF00;
	background-color: #990020;
}
#navigation ul li ul {
	text-decoration: none;
	margin: 0px;
	padding: 0px;
}
#navigation ul li ul li {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ED9f9f;
}
#navigation ul li ul li a {
	text-decoration: none;
	display: block;
	margin: 0px;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 0.5em;
	border-right-width: 1px;
	border-left-width: 28px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #a71f1f;
	border-left-color: #711515;
}
#navigation ul li ul li a:link,#navigation ul li ul li a:visited{
	color: #FFFFFF;
	background-color: #e85070;
}
#navigation ul li ul li a:hover {
	color: #ffff00;
	background-color: #c2425d;
}
#navigation ul li ul.myHide{
display:none;}
#navigation ul li ul.myShow{
display:block;}

-->
</style>
</head>

<body>
<div id="navigation">
  <ul id="listUL">
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a>
      <ul class="myHide">
       <li><a href="#">Lastest News</a></li>
         <li><a href="#">All News</a></li>
      </ul>
    </li>
    <li><a href="#">Sports</a>
      <ul class="myHide">
       <li><a href="#">Basketball</a></li>
       <li><a href="#">Football</a></li>
       <li><a href="#">Volleyball</a></li>
       
      </ul>
    </li>
    <li><a href="#">Weather</a>
      <ul class="myHide">
        <li><a href="#">Today`s Weather</a></li>
        <li><a href="#">Forecast</a></li>
      </ul>
    </li>
  <li><a href="#">Contact Me</a></li>
  </ul> 
</div>
</body>
</html>
上一个：jQuery固定在网页顶部的菜单
下一个：简洁大方的二级下拉菜单
更多图片编程知识: