<! doctypehtml Public "-//w3c//dtd XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<metahttp-equiv= "Content-type" content= "Text/html;charset=utf-8" >
<title> Collapsible Level Two menu </title>
<styletype= "Text/css" >
<!--
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:1pxsolid #ED9F9F;
}
#navigation > UL >li > a{
Display:block;
padding:5px5px 5px 0.5em;
Text-decoration:none;
Border-left:12pxsolid #711515;
Border-right:1pxsolid #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;
}
. txt{
Background-color: #c11136;
Color: #FFFFFF;
padding:5px5px 5px 0.5em;
Text-decoration:none;
Border-left:12pxsolid #711515;
Border-right:1pxsolid #711515;
}
/* submenu CSS style * *
#navigation ul Li ul{
List-style-type:none;
margin:0px;
padding:0px0px 0px 0px;
}
#navigation ul Li ulli{
Border-top:1pxsolid #ED9F9F;
}
#navigation ul Li Ulli a{
Display:block;
padding:3px3px 3px 0.5em;
Text-decoration:none;
Border-left:28pxsolid #a71f1f;
Border-right:1pxsolid #711515;
}
#navigation ul Li Ulli a:link, #navigationul Li ul lia:visited{
Background-color: #e85070;
Color: #FFFFFF;
}
#navigation ul Li Ulli 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>
<scriptlanguage= "JavaScript" >
Window.onload=function () {
Varlistul=document.getelementbyid ("Listul");
Varolist=listul.childnodes;
varoa=0;
for (var i = 0; i < olist.length; i++) {
if (olist[i].tagname== "LI" &&olist[i].getelementsbytagname ("ul") [0]) {
Oa=olist[i];
Oa.onclick=change;
}
}
Functionchange () {
Varos=this.getelementsbytagname ("ul") [0];
if (os.classname== "Myhide")
Os.classname= "Myshow";
Else
Os.classname= "Myhide";
}
}
</script>
<body>
<divid= "Navigation" >
<ulid= "Listul" >
<li>
<divclass= "TXT" >Home</div>
</li>
<li>
<divclass= "TXT" >news</div>
<ulclass= "Myhide" >
<li><ahref= "#" >lastest news</a></li>
<li><ahref= "#" >all news</a></li>
</ul>
</li>
<li>
<divclass= "TXT" >sports</div>
<ulclass= "Myhide" >
<li><ahref= "#" >lastest news</a></li>
<li><ahref= "#" >all news</a></li>
</ul>
</li>
<li>
<divclass= "TXT" >weather</div>
<ulclass= "Myhide" >
<li><ahref= "#" >lastest news</a></li>
<li><ahref= "#" >all news</a></li>
</ul>
</li>
</ul>
</div>
</body>
