网页中的下拉式菜单
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就可以。
主要是参考了这篇文章提到的资源：
浙公网安备 33010602011771号