Copy codeThe Code is as follows:
<! DOCTYPEhtml PUBLIC "-// W3C // dtd xhtml 1.0 Transitional //" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<Html>
<Hrad>
<Metahttp-equiv = "content-type" content = "text/html; charset = UTF-8">
<Title> foldable 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: 1 pxsolid # ED9F9F;
}
# Navigation> ul> li> {
Display: block;
Padding: 5px5px 5px 0.5em;
Text-decoration: none;
Border-left: 12 pxsolid #711515;
Border-right: 1 pxsolid #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: 12 pxsolid #711515;
Border-right: 1 pxsolid #711515;
}
/* Submenu CSS style */
# Navigation ul li ul {
List-style-type: none;
Margin: 0px;
Padding: 0px0px 0px 0px;
}
# Navigation ul li ulli {
Border-top: 1 pxsolid # ED9F9F;
}
# Navigation ul li ulli {
Display: block;
Padding: 3px3px 3px 0.5em;
Text-decoration: none;
Border-left: 28 pxsolid # a71f1f;
Border-right: 1 pxsolid #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 sub menu */
Display: none;
}
# Navigation ul li ul. myShow {/* show sub menu */
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>
</Hrad>
<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>
</Html>