这个是用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/javascript"><!--//--><![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> |
由于对CSS不太熟悉，可能有点错误的认识，欢迎大家指出！要看代码效果可以看下面附件。
menu.rar
