曾经我们千篇一律的，用大量的脚本写一个下拉菜单，现在我们用html来写结构，用css来做外观，做出既美观又易于编辑和更新的下拉菜单，而且能适应各种浏览器。
在开始讲解之前先看一下 预览 。
创建菜单
首先创建我们菜单最重要的部分－－它的结构。最好的方法是创建一个无序列表，让每个子菜单作为父级列表项中一个列表出现。听起来很复杂吧，其实很简单：）。
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet
Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
这些是简单的很容易理解和编辑的html。
视觉上吸引人吗？
假如你上面看过预览了，让我们来加上一些样式。
第一步便是取消无序列表的默认样式和定义我们的菜单项的宽度。
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
接下来，我们要定位我们的列表项，庆幸的是，默认的已是这种垂直堆叠效果，尽管如此，我们仍需将"position"设置成"relative"，以便子菜单能够利用它们。
ul li {
position: relative;
}
下一步便是设置子菜单了，当鼠标移上某个父级菜单项时，它的子菜单正确的出现在它的右边，这是我们想要的效果。
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
使用"left"和"top"属性，我们能绝对定位每个菜单项的子菜单。你会注意到我把"left"的属性值设为149px(比菜单项少1px),这是为了避免主菜单和子菜单之间交迭时产生两条边框（你在后面会弄懂我的意思）。
我们同时设置"display"为"none"，我们不想让子菜单默认是看得见的。
那么现在我们有了 一个框架 ，但是它看起来有点简单，让我们来定义一下那些链接的样式。
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
我已经做好了我的链接样式，只要你愿意，你也可以把它修改成你喜欢的样子。
把"display"设成"block"这条定义很重要，这样可以让链接占据整个列表项。
现在 我们的菜单 看起来好多了，尽管IE下的用户不会这么认为，因为很遗憾的是，在IE架构下，两个列表项之间会有空白，你会发现在IE下面，两个列表项无法接合在一起，尽管如此，我们还是有办法对付这个Bug。
/* Fix IE. Hide from IE Mac */
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
我们可以应用上面的样式，这个样式可以在IE中运行，而不在其它浏览器运行，很棒吧？你会发现我们定义了链接的"height"值为"1%"。但很遗憾（很汗的说-_-!）的是，我们定义的"float"属性，却暴露了IE别一个Bug！就是在让链接块状显示时，必须给它定义高度值。
你也会注意到我们菜单的底部没有合上，下面还缺一个边框线，如下所示，我们定义"UL"来合上它。
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}
还算走运，现在我们可以看到 未加事件的版本 了。
现在是时候让那些子菜单开始工作了，让它们出现在我们移动鼠标到菜单上面的时候。
li:hover ul { display: block; }
瞧…！现在它们在工作了！
“哇噻！它工作了！”－－我接收到来自你百分之一的嚎叫声！叫的好恐怖哦！
好啦，言归正传，在IE下边，我们无法看到上面的效果，因为IE还不支持"hover"这种伪类。
一点点JavaScript可以让IE实现这种效果。
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace»
(" over", "");
}
}
}
}
}
window.onload=startList;
万分感谢Patrick Griffiths和Dan Webb提供的js程序，谢谢了，伙计！
现在，"hover"属性值将变成：
li:hover ul, li.over ul {
display: block; }
另外，为让我们的主"ul"应用JavaScript，把它变成：
<ul id="nav">
现在我们再来看一下 效果 吧！
IE5.01 的Bug解决如下：
/* Fix IE. Hide from IE Mac */
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
最后做一个你自己的吧，这有一个给"Hover"属性 另外加上样式的效果 ，你可以发挥你的想象，做一些其它样式的。
更多的[推荐]利用HTML制作水平下拉菜单请到论坛查看: http://BBS.TC711.COM
【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】
来源：
互联网
日期：2006-4-21
