<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Telescopic Menu </title>
<style>
<!--
body{
Background-color: #ffdee0;
}
#navigation {
width:200px;
font-family:arial;
}
#navigation > UL {
list-style-type:none;/* does not display bullets * *
margin:0px;
padding:0px;
}
#navigation > Ul > li {
border-bottom:1px solid #ED9F9F;/* Add underline/*
}
#navigation > Ul > li > a{
display:block;/* Block Display * *
padding:5px 5px 5px 0.5em;
Text-decoration:none;
BORDER-LEFT:12PX Solid #711515/* The thick red edge on the left * *
border-right:1px solid #711515;/* Right Shadow * *
}
#navigation > Ul > li > A:link #navigation > Ul > li > a:visited{
Background-color: #c11136;
Color: #FFFFFF;
}
#navigation > Ul > li > a:hover{/* Mouse passing time * *
Background-color: #990020/* Change background color * *
Color: #ffff00;/* Change text colors * *
}
/* submenu CSS style * *
#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{/* Hide submenu * *
Display:none;
}
#navigation ul li ul.myshow{/* Display submenu * *
Display:block;
}
-->
</style>
<script language= "JavaScript" >
function Change () {
Through the parent element Li, find the brother element ul
var oseconddiv = this.parentNode.getElementsByTagName ("ul") [0];
CSS alternate to achieve explicit, implicit
if (Oseconddiv.classname = = "Myhide")
Oseconddiv.classname = "Myshow";
Else
Oseconddiv.classname = "Myhide";
}
Window.onload = function () {
var Oul = document.getElementById ("Listul");
var aLi = oul.childnodes;//child element
var OA;
for (Var i=0;i<ali.length;i++) {
If the child element is Li, and this Li has a submenu of UL
if (Ali[i].tagname = = "LI" && ali[i].getelementsbytagname ("ul"). Length) {
OA = ali[i].firstchild;//Found hyperlinks
Oa.onclick = change;//Dynamic Add Click function
}
}
}
</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>
