<! 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>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> nav </title>
<Script language = "JavaScript">
// JavaScript document
Startlist = function (){
If (document. All & document. getelementbyid ){
Navroot = Document. getelementbyid ("nav ");
For (I = 0; I <navroot. childnodes. length; I ++ ){
Node = navroot. childnodes [I];
If (node. nodename = "Li "){
Node. onmouseover = function (){
This. classname + = "over ";
}
Node. onmouseout = function (){
This. classname = This. classname. Replace ("over ","");
}
}
}
}
}
Window. onload = startlist;
</SCRIPT>
<Style type = "text/CSS">
<! --
Body {
Font: normal 11px verdana;
}
Ul {
Margin: 0;
Padding: 0;
List-style: none;
Width: 150px;/* width of menu items */
Border-bottom: 1px solid # CCC;
}
Ul Li {
Position: relative;
}
Li ul {
Position: absolute;
Left: 149px;/* Set 1px less than menu width */
Top: 0;
Display: none;
}
/* Styles for menu items */
Ul Li {
Display: block;
Text-Decoration: none;
Color: #777;
Background: # FFF;/* IE6 bug */
Padding: 5px;
Border: 1px solid # CCC;/* IE6 bug */
Border-bottom: 0;
}
/* Holly hack. ie requirement \*/
* HTML ul Li {float: Left; Height: 1% ;}
* HTML ul Li a {Height: 1% ;}
/* End */
Li: hover ul, Li. Over ul {display: block;}/* The Magic */
-->
</Style>
</Head>
<Body>
<Ul id = "nav">
<Li> <a href = "#"> Home </a> </LI>
<Li> <a href = "#"> about </a>
<Ul>
<Li> <a href = "#"> history </a> </LI>
<Li> <a href = "#"> Team </a> </LI>
<Li> <a href = "#"> offices </a> </LI>
</Ul>
</LI>
<Li> <a href = "#"> services </a>
<Ul>
<Li> <a href = "#"> Web Design </a> </LI>
<Li> <a href = "#"> Internet marketing </a> </LI>
<Li> <a href = "#"> hosting </a> </LI>
<Li> <a href = "#"> domain names </a> </LI>
<Li> <a href = "#"> broadband </a> </LI>
</Ul>
</LI>
<Li> <a href = "#"> Contact Us </a>
<Ul>
<Li> <a href = "#"> United Kingdom </a> </LI>
<Li> <a href = "#"> France </a> </LI>
<Li> <a href = "#"> USA </a> </LI>
<Li> <a href = "#"> Australia </a> </LI>
</Ul>
</LI>
</Ul>
</Body>
</Html>