网页中的下拉式菜单
网页中的下拉式菜单
10几年前，我就在网页中用JS脚本实现下拉式菜单，并且导航条还与主窗口处于不同的帧。无非就是些onmouseover,onmouseout之类的事件罢了。这种效果，只要舍得花时间，一万年总可以做出来，但我并不觉得这有什么技术含量，只觉繁琐得很，无聊得很。你实现了又能怎么样呢，说明你的技术就比别人强？雕虫小技罢了。可叹，10几年前，我已经开始用javascript，到现在，却没有丝毫长进，非但如此，javascript代码我却越来越看不明白了。主要是它语法太灵活，有好多写法我都不知道是什么意思，也懒得钻研，日复一日，年复一年，转眼老之将至，成为一个即将被淘汰的老代码工。
现在我知道鸟，不用onmouseover,onmouseout也可以实现下拉菜单。就用CSS。
其原理在于：hover。
hover，CSS一个伪类。“这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。”。我一直以为只会用在超链接上，但其实，象
象下面这个例子，就是先将子菜单隐藏起来：并非是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代码：