Tree menus composed of Div and CSS comply with web standards

1 first define a JS:
<SCRIPT type = "text/JavaScript">
Function togglemenu (ID ){
Element = Document. getelementbyid (ID );
Element. classname = (element. classname. tolowercase () = 'expanded '? 'Collapsed ': 'expanded ');
}
Onload = function () {// automatically load closed state
Togglemenu ('submenuid0 ');
Togglemenu ('submenuid1 ');
}
</SCRIPT>

2 CSS

Body {
Margin: 0px;
Padding: 0;
Font: 12px "lucida Grande", verdana, Arial, Helvetica, sans-serif;
Background: # ffffff;
Text-align: center;
}

Ul {
Margin: 0;
Padding: 0;
List-style: none;
}

# Treenav {
Margin: 10px;
Text-align: left;
}

# Treenav ul Li {
Margin: 1px 0;
Padding: 0;
Font-size: 11px;
}

# Treenav ul. Expanded {
Display: block;
}

# Treenav ul. Expanded, # treenav ul. Collapsed {
Margin: 5px 10px;
}

# Treenav ul. Collapsed {
Display: none;
}

. Expanded Li,. Collapsed Li {
/* Border-bottom: 1px dashed # cccccc ;*/
Width: 200px;
}

. Listhead {
Font-weight: bold;
Display: block;
Font-size: 12px;
Color: #333333;
Background: # f1f1f1;
Padding: 3px;
Width: 120px;
Margin: 1px 0;
}

# Treenav {
Text-Decoration: none;
Color: #666666;
}

# Treenav A: hover {
Color: #990000;
}

3. Define a Tree Structure

<Ul>
<Li> <a href = "somepage" onclick = "togglemenu ('submenuid0'); Return false;" class = "listhead"> Chapter 1 Preface </a>

<Ul class = "expanded" id = "submenuid0">

<Li> <a href = "#" onclick = "togglemenu ('sub0 _ submenuid1 ');"> section 1 website design overview </a>
<Ul class = "Collapsed" id = "sub0_submenuid1">
<Li> <a href = "#"> general webpage creation process </a> </LI>
<Li> <a href = "#"> Webpage Design price standards </a> </LI>
</Ul>
</LI>

<Li> <a href = "#" onclick = "togglemenu ('sub0 _ submenuid2');"> section 2 website design overview </a>
<Ul class = "Collapsed" id = "sub0_submenuid2">
<Li> <a href = "#"> Webpage Design price standards </a> </LI>
</Ul>
</LI>

</Ul>

</LI>
</Ul>
<! Latency>
<Ul>
<Li> <a href = "somepage" onclick = "togglemenu ('submenuid1'); Return false;" class = "listhead"> Chapter 1 Preface </a>

<Ul class = "expanded" id = "submenuid1">

<Li> <a href = "#" onclick = "togglemenu ('sub1 _ submenuid1 ');"> section 1 website design overview </a>
<Ul class = "Collapsed" id = "subscribe submenuid1">
<Li> <a href = "#"> general webpage creation process </a> </LI>
<Li> <a href = "#"> general webpage creation process </a> </LI>
<Li> <a href = "#"> general webpage creation process </a> </LI>
<Li> <a href = "#"> general webpage creation process </a> </LI>
<Li> <a href = "#"> Webpage Design price standards </a> </LI>
<Li> <a href = "#"> Webpage Design price standards </a> </LI>
</Ul>
</LI>

<Li> <a href = "#" onclick = "togglemenu ('sub1 _ submenuid2 ');"> section 2 website design overview </a>
<Ul class = "Collapsed" id = "subscribe submenuid2">
<Li> <a href = "#"> general webpage creation process </a> </LI>
<Li> <a href = "#"> general webpage creation process </a> </LI>
<Li> <a href = "#"> general webpage creation process </a> </LI>
<Li> <a href = "#"> general webpage creation process </a> </LI>
<Li> <a href = "#"> Webpage Design price standards </a> </LI>
<Li> <a href = "#"> Webpage Design price standards </a> </LI>
</Ul>
</LI>

</Ul>

</LI>
</Ul>

Original article addressHttp://www.yw11.com/post/2006110103.html