伸缩的菜单
<style><!--body{background-color:#ffdee0;}#navigation {width:200px;font-family:Arial;}#navigation > ul {list-style-type:none;/* 不显示项目符号 */margin:0px;padding:0px;}#navigation > ul > li {border-bottom:1px solid #ED9F9F;/* 添加下划线 */}#navigation > ul > li > a{display:block;/* 区块显示 */padding:5px 5px 5px 0.5em;text-decoration:none;border-left:12px solid #711515;/* 左边的粗红边 */border-right:1px solid #711515;/* 右侧阴影 */}#navigation > ul > li > a:link, #navigation > ul > li > a:visited{background-color:#c11136;color:#FFFFFF;}#navigation > ul > li > a:hover{/* 鼠标经过时 */background-color:#990020;/* 改变背景色 */color:#ffff00;/* 改变文字颜色 */}/* 子菜单的CSS样式 */#navigation ul li ul{list-style-type:none;margin:0px;padding:0px 0px 0px 0px;}#navigation ul li ul li{border-top:1px solid #ED9F9F;}#navigation ul li ul li a{display:block;padding:3px 3px 3px 0.5em;text-decoration:none;border-left:28px solid #a71f1f;border-right:1px solid #711515;}#navigation ul li ul li a:link, #navigation ul li ul li a:visited{background-color:#e85070;color:#FFFFFF;}#navigation ul li ul li a:hover{background-color:#c2425d;color:#ffff00;}#navigation ul li ul.myHide{/* 隐藏子菜单 */display:none;}#navigation ul li ul.myShow{/* 显示子菜单 */display:block;}--></style><script language="javascript">function change(){//通过父元素li，找到兄弟元素ulvar oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];//CSS交替更换来实现显、隐if(oSecondDiv.className == "myHide")oSecondDiv.className = "myShow";elseoSecondDiv.className = "myHide";}window.onload = function(){var oUl = document.getElementById("listUL");var aLi = oUl.childNodes;//子元素var oA;for(var i=0;i<aLi.length;i++){//如果子元素为li，且这个li有子菜单ulif(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){oA = aLi[i].firstChild;//找到超链接oA.onclick = change;//动态添加点击函数}}}</script>?
?
<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>?