实现下拉菜单的简洁方法

 这几天在做二级分类，要产生一个二级菜单，大龙给了个例子，实现思路很清晰，介绍给大家。
   这个是用CSS+DIV+JS(IE下才要这个)实现的。
  1：CSS里很多，关键就下面两个：

#nav li ul { position: absolute; left: -999em; width: 150px; font-weight: normal; margin: 0px; padding: 0px; } #nav li:hover ul, #nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{ left: auto;

一个是初始状态，先隐藏下拉项，然后是鼠标触发事件，即放上鼠标显示下拉项。
   2：在IE下要用JS辅助才有用，所以家了个JS：

<script type="text/java script"><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls.onmouseover=function() { this.className+=" sfhover"; } sfEls.onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script>

   3：最后是DIV形式的数据，结构和清晰，用户很容易使用的：

<ul id="nav"> <li><a href="/aboutme.html">About Me</a> <ul> <li><a href="#">Sub Menu 31</a></li> <li><a href="#">Sub Menu 32</a></li> <li><a href="#">Sub Menu 33</a></li> <li><a href="#">Sub Menu 34</a></li> </ul> </li> <li><a href="/tutorials.html">Tutorials</a> <ul> <li><a href="#">Sub Menu 31</a></li> <li><a href="#">Sub Menu 32</a></li> <li><a href="#">Sub Menu 33</a></li> <li><a href="#">Sub Menu 34</a></li> </ul> </li> </ul>