深入研究CSS下拉菜单

姚 朋

(承德石油高等专科学信息中心，河北承德 067000)

1 CSS下拉菜单的基本要素和工作原理

用CSS实现下拉菜单，需要解决两个基本问题。第一个是当鼠标停留在一级菜单上时，CSS要能够响应这个鼠标事件。第二个是在CSS响应这个鼠标事件的时候，让原来处于隐藏状态的二级子菜单显示出来。在CSS标准中，:hover这个伪类正好可以响应当鼠标停留在某一网页元素上时这样一个鼠标事件，于是第一个问题解决了。要通过:hover这个伪类提供的鼠标事件进行处理，来显示二级子菜单，就需要使用CSS包含选择符了［1］。CSS包含选择符的功能是可以通过某一网页元素控制包含在其中网页元素的样式。这时，用CSS制作下拉菜单的两条要素已经具备了。因此CSS下拉菜单的基本工作原理就是:通过为一级菜单的网页元素设置:hover伪类来触发鼠标事件，然后在这个事件中利用CSS包含选择符显示嵌套在一级菜单元素中的二级子菜单。根据这个原理，也可以制作出多级CSS下拉菜单。

2 主要XHTML和CSS代码

2.1 主要XHTML代码

2.2 主要CSS代码

2.3 关键XHTML代码分析

以上的XHTML代码(除了IE的条件注释以外)的结构很简单，一级菜单容器.menu使用了一个无序列表，每个二级子菜单也使用一个无序列表嵌套在相应的一级菜单的列表项之内，所有代码符合XHTML的标准。

这段XHTML代码看起来复杂的地方是其中的IE条件注释，引入IE条件注释，是为了兼容IE6，原因是IE6只支持a:hover伪类，而不支持其它网页元素的:hover伪类。在国内，截止2012年3月份，IE6的使用率为22.40%［2］，所以尽管它对CSS标准的支持不如现代标准浏览器，却暂时还不能忽视它的存在。IE的条件注释是微软从IE5开始引入网页中的一种非标准逻辑语句，它只能为IE浏览器所识别，其它非IE浏览器则把它当做注释语句忽略掉，因此可以用它来编写针对某个版本IE浏览器的HTML代码［3］。因此兼容IE6的方法就只能把二级子菜单嵌套在一个超链接之内，虽然这不符合XHTML标准。但是不能直接把二级子菜单嵌套在原有一级菜单的超链接里，而是要通过IE条件注释为IE6增加一个新的一级菜单的超链接，包含在二级子菜单的外面，然后通过绝对定位，覆盖原有的一级菜单。这样做既可以兼容IE6，又可以使这段XHTML代码在现代标准浏览器里符合标准。以上IE条件注释语句的意思是:当IE浏览器的版本小于IE7的时候，向网页中添加包含在条件注释中的XHTML代码。所添加的这些XHTML代码的作用包括:1)在二级子菜单容器的无序列表外部添加表格，解决IE6二级子菜单的无序列表的问题。2)把这个表格嵌套进超链接里，解决IE6不支持li:hover伪类的问题。3)为超链接添加一个div容器，解决超链接不能正确显示和定位的问题。

2.4 核心CSS代码分析

二级子菜单虽然嵌套在一级菜单的列表项之内，但其能否正常显示，相对于一级子菜单的位置是一个关键因素。在现代标准浏览器中，只有当二级子菜单的顶部边框与一级菜单的底部边框紧贴或与一级菜单的底部margin有重合时，鼠标在从一级菜单移动到二级子菜单的过程中，二级子菜单才不会消失。其次是二级子菜单容器的无序列表UL必须绝对定位，这样它就不会占用在文档流中的当前位置，而且还可以浮动显示在其它内容之上。由于二级子菜单的定位父元素是一级菜单，所以一级菜单容器.menu中的li要设置为相对定位。为了使二级子菜单的顶部边框正好可以紧贴着一级菜单的底部边框，需要知道一级菜单的精确高度。根据盒模型，一级菜单的高度是由其中块状显示的超链接的高度决定的，计算结果是20像素，包括外边框，也就是margin部分。但在IE浏览器中，一级菜单的实际高度是22像素，多了2像素，可以看出IE浏览器并没有严格按照盒模型来计算。绝对定位二级子菜单与父元素顶部的距离为21像素，使二级子菜单的顶部边框紧贴着一级菜单的底部边框。

默认状态下，在一级菜单的鼠标事件没有被触发的时候，二级子菜单处于隐藏状态，即设置visibility:hidden属性。当鼠标停留在某个一级菜单上时，对应的li:hover伪类响应这个鼠标事件，通过包含选择符，设置其包含的二级子菜单ul的visibility:visible属性，使二级子菜单显示出来。由于二级子菜单是嵌套在一级菜单之内的，所以当鼠标离开一级菜单的超链接，移动到二级子菜单之上时，二级子菜单仍然会显示，而当鼠标移走之后，二级子菜单又会恢复默认的隐藏状态。对比用JavaScript实现的下拉菜单，CSS的工作方式就显得非常的简洁，从这个例子也可以看出，CSS的某些功能和JavaScript是有重合的。

2.5 兼容IE6的CSS代码分析

为了兼容IE6，在XHTML代码中通过IE条件注释增加了一些代码，在CSS中也要对其进行相应的控制。第一是把包含一、二级菜单的div容器绝对定位，覆盖标准浏览器下显示的一级菜单。第二是把嵌套在超链接中的表格设置为内联显示，消除表格对IE6中一级菜单高度的影响，使其与现代标准浏览器一致。

3 其它问题

3.1 兼容问题

一级菜单容器.menu类的宽度要显式定义，否则当其实际宽度大于IE和Opera浏览器窗口时，会自动换行显示。一级菜单容器.menu类的高度也要显式定义，否则Firefox和Opera浏览器不能正确解析它与和其后内容之间的margin值。根据盒模型分析这个问题的原因应该是:Firefox和Opera没有根据一级菜单容器.menu所包含的超链接的高度来计算.memu容器的高度，而是直接认为它的高度为零，所以其后的内容就向上流动，直到被一级菜单挡住，从而导致margin属性失效。二级子菜单中的列表项或超链接不能设置marign值，否则鼠标在经过margin区域时二级子菜单可能会消失。

3.2 一、二级菜单间距的调节

一般情况下，二级子菜单是紧贴着一级菜单的底边框显示的，也可以制作二级子菜单和一级子菜单之间有一定空隙的效果。在现代标准浏览器里，这个效果可以很容易的通过一、二级菜单之间的margin值调节，但是IE6不支持这种方法。为了兼容IE6，可以通过设置子菜单容器ul的padding-top属性来调节一、二级菜单之间的空隙。但如果希望显示效果如图1那样有一个边框，就不能直接设置子菜单容器ul的边框，而是要通过设置其内部li元素的左右边框、首个li元素的顶部边框和末尾li元素的底部边框来模拟一个边框。使用padding调节一、二级菜单间距的另一个问题是这个距离最大不能超过5像素。

4 结束语

以上介绍的CSS下拉菜单可以兼容国内外各种主流的浏览器。除了下拉菜单，使用CSS还可以实现选项卡、图片切换、圆角等很多功能。随着Web标准化的进程和现代标准浏览器对CSS标准更多的支持，CSS将能在网页中完成更多和更炫目的功能。如今，有越来越多的网页设计者开始关注和研究CSS，将来CSS在网页设计中的表现将会更加出色。

［1］ 侯利军.精通Web标准网页布局—XHTML+CSS+JavaScript［M］.北京:人民邮电出版社，2007.

［2］ 浏览器之家［EB/OL］.http://www.liulan7.net/a/top/2012/0402/6547.html.

［3］ 朱印宏.CSS商业网站布局之道［M］.北京:清华大学出版社，2007.