Drop-Down Menus, Horizontal Style by Nick Rigby *注：内容主要是意译，目的是介绍这种菜单的制作过程。 每个建立过下拉菜单的人都习惯了因为实现菜单需要而采用大量的脚本。但是使用结构化的 HTML 和简单的 CSS ，也可以创建易于编辑和升级，并且视觉效果良好的菜单，它们可以跨浏览器使用，包括 IE 。更好的是，对于那些忌讳代码的设计者，不需要使用 JavaScript （实际上，需要一点点 JavaScript ，但是你不需要去考虑这些）。 这里提供了一个预览。 建立菜单 建立菜单的首要也是最重要部分是建立它的结构。完成这个得最好方法是通过无序列表，每个子菜单作为父列表项内的列表来呈现。听起来很复杂？其实它很直观： 代码: <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 即可以访问也易于编辑。（有些歧义，明白就好smile.gif） 视觉呈现 如果你已经预览上面的菜单，看到的只是一些项的列表。但是我可以向你保证它可以很好地呈现，现在我们来加入样式。 第一步，我们要去掉无序列表的缩进和项目符号，并且定义菜单项的宽度： 代码: ul { margin: 0; padding: 0; list-style: none; width: 150px; } 下面，我们需要定位菜单项。很幸运的是，默认情况下，它们是垂直堆积的（排列？）。但是为了定位它们包含的子菜单，我们必须设置它的定位为 relative： 代码: ul li { position: relative; } 下一步是子菜单，我们希望主菜单被鼠标覆盖的时候，子菜单出现在它的右侧。 代码: li ul { position: absolute; left: 149px; top: 0; display: none; } 使用 '“left” 和 “top” 属性，我们完全可以将每个子菜单定位在它的父项中。你可能注意到了我们设置 “left” 为 149px （比主菜单项的宽度窄一个像素），这是为了让子菜单贴近主菜单而不出现两条边框（后面你将会明白我所说的）。 另外，我们将 显示（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 */ 在上面，我们采用 Holly Hack，这些规则在除了 IE 以外的浏览器中可以被隐藏。你可能注意到增加了高度 1% 。因为浮动修复导致了另外一个 IE BUG ，要让链接作为块元素显示，必须给它设置高度。 你可能也注意到了要闭合菜单，我们可以给列表增加缺失的底边，现在样式规则变成如下的了： 代码: ul { margin: 0; padding: 0; list-style: none; width: 150px; border-bottom: 1px solid #ccc; } 经过这些步骤，没有程序化的菜单看起来是这样的。 让它工作起来 现在变得有趣起来。当我们将鼠标覆盖在主菜单上的时候，要让子菜单显示。 代码: li:hover ul { display: block; } OK, OK, so that darn IE/Win has to ruin everything and not do as it’s told. （不知道如何翻译合适）IE 只允许 :hover 类应用在链接上，所以 li:hover 在 IE 下面什么都不会并不会让子菜单显示。 如下的 JavaScript 程序可以完成这个： 代码: startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; Great thanks and appreciation is due here to Patrick Griffiths and Dan Webb, who introduced this trickery in a previous ALA article, Suckerfish Dropdowns. Thanks, guys! 现在，hover 的样式定义变成如下： 代码: li:hover ul, li.over ul { display: block; } 增加一点，为了让 JavaScript 能访问主 ul ，对应修改： 代码: <ul id="nav"> 现在的效果。 IE5.01 滑动菜单 BUG IE5.01 下的用户会发现当覆盖其中的某些项时，菜单会四处跳动。通过下面的代码可以很容易修缮[我没在 IE5.01 下面测试过，所以对于作者说的这个现象，没有明确的概念，翻译可能也有些出入。 代码: /* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ IE 6 的 BUG During the development of this article, I uncovered a strange bug that I believe is only apparent in IE6. A background must be declared on the li a, else when a sub-menu stretches further (vertically) than the main menu itself, the links start to disappear before you have time to click them. Strange! Try it to see for yourself. 创建自己的菜单 作者的大意是可以通过修改某些样式（主要是 hover），来创建不同的视觉效果，并且给出了一个演示。 来源： http://www.alistapart.com/articles/horizdropdowns/ 水平有限，无法准确翻译，只能根据自己的理解简单列出步骤，有兴趣的可以按照步骤试试看，英文不错的，建议看原文。
按照上面的过程重写了一遍，效果很理想。 HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>下拉菜单</title> <style type="text/css"> <!-- ul { margin: 0px; padding: 0px; list-style: none; width: 120px; border-bottom: 1px solid #777; } ul li { position: relative; } li ul { position: absolute; left: 119px; top: 0px; display: none; } ul li a { display: block; font-size: 12px; text-decoration: none; color: #333; background-color: #FFF; padding: 5px; border: 1px solid #777; border-bottom: 0px; } /* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ li:hover ul, li.over ul { display: block; } --> </style> <script language="javascript" type="text/javascript"> <!-- 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; --> </script> </head> <body> <ul id="nav"> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a> <ul> <li><a href="#">公司简介</a></li> <li><a href="#">组织机构</a></li> <li><a href="#">企业历程</a></li> </ul> </li> <li><a href="#">服务内容</a> <ul> <li><a href="#">网站建设</a></li> <li><a href="#">网站推广</a></li> <li><a href="#">域名空间</a></li> <li><a href="#">企业信箱</a></li> </ul> </li> <li><a href="#">联系我们</a> <ul> <li><a href="#">温州总部</a></li> <li><a href="#">瑞安分部</a></li> <li><a href="#">乐清分部</a></li> </ul> </li> </ul> </body> </html>