多级菜单构成模式：<li></li>之间插入一个<ul></ul>
原理：通过对元素的显示与隐藏的控制来实现。
说明：
1、对于 li:hover ul,li.over ul { display: block;} 这句来说，已经能实现我们想要的hover效果了，问题是IE6不支持，为了兼容，还得加上一段JS。你可以自己试着把JS去掉，在IE7和FF下是正常的。
2、代码简洁得不能再简洁，用JS+DIV+CSS构成，CSS几乎没有添加什么样式，请按需自行解决。
3、此例只作演示、学习原理用，并不适合用来建站，因为一旦 hover 大栏目，整个 #nav 的DIV都会被撑高，会把下面的内容给撑下去，而这不是我们希望见到的结果。（此问题的解决方法，且听下回分解^_^）
================华=丽=的=分=割=线==================
<!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>最简单的二级下拉导航效果-JS+DIV+CSS</title>
<style type="text/css">
<!--
ul {
padding: 0;
margin: 0;
list-style:none;
}
li {
float:left;
width:100px;
}
li ul {
display: none;
top: 20px;
}
li:hover ul,li.over ul {
display: block;
}
-->
</style>
<script language="javascript">
startList = function()
{
navli = document.getElementById("nav").document.getElementsByTagName("li");
if(navli)
{
for(i=0 ; i<navli.length ; i++)
{
navli[i].onmouseover = function()
{
this.className+="over";
}
navli[i].onmouseout = function()
{
this.className = this.className.replace("over","");
}
}
}
}
window.onload = startList;
</script>
</head>
<body>
<ul id="nav">
<li><a href="">大栏目一</a>
<ul>
<li><a href="">小栏目一-1</a></li>
<li><a href="">小栏目一-2</a></li>
<li><a href="">小栏目一-3</a></li>
<li><a href="">小栏目一-4</a></li>
</ul>
</li>
<li><a href="">大栏目二</a>
<ul>
<li><a href="">小栏目二-1</a></li>
<li><a href="">小栏目二-2</a></li>
<li><a href="">小栏目二-3</a></li>
</ul>
</li>
<li><a href="">大栏目三</a>
<ul>
<li><a href="">小栏目三-1</a></li>
<li><a href="">小栏目三-2</a></li>
<li><a href="">小栏目三-3</a></li>
<li><a href="">小栏目三-4</a></li>
</ul>
</li>
</ul>
<div style="width: 900px;">
其他文字。其他文字。其他文字。其他文字。其他文字。
</div>
</body></html>
