Use the drop-down menu implemented by css + js. Use getElementsByTagName to obtain ul and hide the display.
:
The Code is as follows:
<! 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 runat = "server">
<Title> JavaScript drop-down menu </title>
<Style type = "text/css">
*{
Padding: 0;
Margin: 0;
}
Body {
Font-family: verdana, sans-serif;
Font-size: small;
}
# Navigation, # navigation li ul {
List-style-type: none;
}
# Navigation {
Margin: 20px;
}
# Navigation li {
Float: left;
Text-align: center;
Position: relative;
}
# Navigation li a: link, # navigation li a: visited {
Display: block;
Text-decoration: none;
Color: #000;
Width: 120px;
Height: 40px;
Line-height: 40px;
Border: 1px solid # fff;
Border-width: 1px 1px 0 0;
Background: # c5dbf2;
Padding-left: 10px;
}
# Navigation li a: hover {
Color: # fff;
Background: # 2687eb;
}
# Navigation li ul li a: hover {
Color: # fff;
Background: # 6b839c;
}
# Navigation li ul {
Display: none;
Position: absolute;
Top: 40px;
Left: 0;
Margin-top: 1px;
Width: 120px;
}
# Navigation li ul {
Display: none;
Position: absolute;
Top: 0px;
Left: 130px;
Margin-top: 0;
Margin-left: 1px;
Width: 120px;
}
</Style>
<Script type = "text/javascript">
Function displaySubMenu (li ){
Var subMenu = li. getElementsByTagName ("ul") [0];
SubMenu. style. display = "block ";
}
Function hideSubMenu (li ){
Var subMenu = li. getElementsByTagName ("ul") [0];
SubMenu. style. display = "none ";
}
</Script>
</Head>
<Body>
<Ul id = "navigation">
<Li onmouseover = "displaySubMenu (this)" onmouseout = "hideSubMenu (this)">
<A href = "#"> Topic 1 </a>
<Ul>
<Li> <a href = "#"> Topic 1-> menu 1 </a> </li>
<Li> <a href = "#"> Topic 1-> menu 2 </a> </li>
<Li> <a href = "#"> Topic 1-> menu 3 </a> </li>
<Li> <a href = "#"> Topic 1-> menu 4 </a> </li>
</Ul>
</Li>
<Li onmouseover = "displaySubMenu (this)" onmouseout = "hideSubMenu (this)">
<A href = "#"> Topic 2 </a>
<Ul>
<Li> <a href = "#"> Topic 2-> menu 1 </a> </li>
<Li> <a href = "#"> Topic 2-> menu 2 </a> </li>
<Li> <a href = "#"> Topic 2-> menu 3 </a> </li>
<Li> <a href = "#"> Topic 2-> menu 4 </a> </li>
<Li> <a href = "#"> Topic 2-> menu 5 </a> </li>
</Ul>
</Li>
<Li onmouseover = "displaySubMenu (this)" onmouseout = "hideSubMenu (this)">
<A href = "#"> Topic 3 </a>
<Ul>
<Li onmouseover = "displaySubMenu (this)" onmouseout = "hideSubMenu (this)">
<A href = "#"> Topic 3-> menu 1 </a>
<Ul>
<Li> <a href = "#"> menu 1-> sub-menu 1 </a> </li>
<Li> <a href = "#"> menu 1-> sub-Menu 2 </a> </li>
<Li> <a href = "#"> menu 1-> sub-menu 3 </a> </li>
<Li> <a href = "#"> menu 1-> sub-menu 4 </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> Topic 3-> menu 2 </a> </li>
<Li onmouseover = "displaySubMenu (this)" onmouseout = "hideSubMenu (this)">
<A href = "#"> Topic 3-> menu 3 </a>
<Ul>
<Li> <a href = "#"> menu 3-> sub-menu 1 </a> </li>
<Li> <a href = "#"> menu 3-> sub-Menu 2 </a> </li>
<Li> <a href = "#"> menu 3-> sub-menu 3 </a> </li>
</Ul>
</Li>
</Ul>
</Li>
</Ul>
</Body>
</Html>