10几年前，我就在网页中用JS脚本实现下拉式菜单，并且导航条还与主窗口处于不同的帧。无非就是些onmouseover,onmouseout之类的事件罢了。这种效果，只要舍得花时间，一万年总可以做出来，但我并不觉得这有什么技术含量，只觉繁琐得很，无聊得很。你实现了又能怎么样呢，说明你的技术就比别人强？雕虫小技罢了。可叹，10几年前，我已经开始用javascript，到现在，却没有丝毫长进，非但如此，javascript代码我却越来越看不明白了。主要是它语法太灵活，有好多写法我都不知道是什么意思，也懒得钻研，日复一日，年复一年，转眼老之将至，成为一个即将被淘汰的老代码工。
现在我知道鸟，不用onmouseover,onmouseout也可以实现下拉菜单。就用CSS。
其原理在于：hover。
hover，CSS一个伪类。“这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。”。我一直以为只会用在超链接上，但其实，象<LI>、<DIV>都可以的。
象下面这个例子，就是先将子菜单隐藏起来：并非是visible=none，而是位置处于屏幕外，等鼠标移到父菜单项上，就将位置定义在可见范围内，看上去，就好象菜单弹出来了。这一切，都在CSS中定义，不用写一句JS代码。
关键的CSS语句，注意其中的2个top：
.sf-menu ul { position: absolute; top: -999em; width: 10em; /* left offset of submenus need to match (see below) */ } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ z-index: 99; }完整的HTML代码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>下拉菜单</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style type="text/css"> .sf-menu ul { position: absolute; top: -999em; width: 10em; /* left offset of submenus need to match (see below) */ } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ z-index: 99; } .sf-menu li { float: left; position: relative; } .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' 非必要 */ } .sf-menu ul li { width: 100%; /* 保证每个子菜单都独占一行 */ } </style> </head> <body> <ul class="sf-menu"> <li> 【有子菜单】 <ul> <li> [子菜单0] </li> <li> [子菜单1] </li> </ul> </li> <li> 【无子菜单】 </li> </ul> </body> </html>
但是IE6不支持这种方式。不过引用下面说的资源中的JS就可以。
主要是参考了这篇文章提到的资源：
8293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
