网页中的下拉式菜单- 前端开发

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>