没啥，写着玩，当做记录
指不定谁什么时候用的到呢
CSS部分
ul{margin:0; padding:0; list-style:none; width:130px; border-bottom:1px solid #ccc; font-size:12px}
ul li{position:relative}
li ul{position:absolute; left:129px; top:0; display:none}
ul li a{display:block; text-decoration:none; color:#777; background:#fff; padding:5px; border:1px solid #ccc; border-bottom:0}
/* 解决UL在IE中显示不正确问题 */
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul { display: block; }
JS部分
<!--//--><![CDATA[//><!--
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;
//--><!]]>
主体部分
<body>
<ul id="nav">
<li><a href="#">AAA</a>
<ul>
<li><a href="#">aaa</a> </li>
<li><a href="#">bbb</a></li>
<li><a href="#">ccc</a></li>
<li><a href="#">ddd</a></li>
</ul>
</li>
<li><a href="#">BBB</a>
<ul>
<li><a href="#">111</a></li>
<li><a href="#">222</a></li>
<li><a href="#">333</a></li>
<li><a href="#">444</a></li>
<li><a href="#">555</a></li>
<li><a href="#">666</a></li>
<li><a href="#">777</a></li>
</ul>
</li>
<li><a href="#">CCC</a>
<ul>
<li><a href="#">aaaa</a></li>
<li><a href="#">bbbb</a></li>
<li><a href="#">cccc</a></li>
<li><a href="#">dddd</a></li>
</ul>
</li>
</ul>
</body>
显示效果为