① 改造HTML代码。由于在IE 6中只有a标记才能支持：hove伪类，因此要把每一组“<dl> …</dl>”装到一个表格里，然后再把这个表格装入到<a>标记中，代码如下。

注意增加的代码在第2行和倒数第2行，这样做的目的是为了在后面对a标记使用:hover伪类。

② 由于使用了表格以后，dl的宽度不能自动设置，因此这里人为设置dl的宽度，代码如下。

③ 由于使用了表格后，导致位置发生了变化，因此需要对表格的样式进行设置，代码如下。

此时在Firefox和IE 6中的效果可以看到，主菜单的效果已经正确了，但是在IE 6中仍然无法打开子菜单。lodidance.com

④ 对鼠标响应进行设置。找到如下一段代码：

修改为：

此时在IE 6中的显示效果如图子菜单已经可以显示出来了。但是还存在一个问题，在子菜单中，只有当鼠标指针移动到文字上的时候才能激活子菜单项的鼠标经过效果，而如果鼠标指针移到文字旁边则无法触发。我们希望的正确结果是只要鼠标指针进入矩形范围内，都可以触发鼠标经过效果。

⑤ 这是由于IE 6本身存在的固有问题导致的，解决办法是在代码中找到：

然后在它下面增加一行：

也就是在dd的链接样式中，增加一条高度的CSS样式，这样IE 6就会强制重新计算，从而得到正确的结果。

⑥ 左边的一组菜单设置完成了，接下来把右边3组的HTML同样设置即可，这里就不再重复代码了。读者可以参考网页学习网CSS教程资源中这个步骤完成后的“第9章/final-6.htm”文件。

如果希望更忧雅地写这组代码，应该区分浏览器。对不同的浏览器使用不同的HTML代码。可以使用“条件注释”功能来实现。

例如，对于如下一行HTML代码，在IE浏览器中，会根据版本进行选择。

“if"的意思是“如果”，“lte”是“less than or equal”的缩写。也就是低于或等于IE 6时，后面的“(table><tr><td>”这段代码就有效；如果不满足“低于或等于IE 6”这个条件，“<table<tr><td>”这段代码就会被忽略。

这组特定格式的“条件注释”只有IE浏览器认识，其他浏览器（例如Firefox）根本不认识，会当作普通的注释直接忽略掉。因此对于IE 8或者Firefox浏览器，这行代码就像不存在一样。理解了上述原理之后，就可以对这段代码进行如下修改：

本章重点

这样，对于IE 7和Firefox浏览器，就像没有做改造前一样，而对于IE 6流览器，就是改造后的代码，这样就很完美了。读者可以参考网页学习网CSS教程资源中这个步骤完成后的“第9章/final-7.htm”文件。lodidance.com

在本章中，制作了一个比较复杂的可以实现鼠标指针经过时，打开子菜单的导航条。对于大多数网站，两级的下拉菜单已经可以满足绝大多数需要了。使用CSS，也可以制作更多级的菜单。应用多级菜单的网站目前很少见到，因为网页是一个非常灵活的载体，与其使用更多级的菜单来完成复杂的导航，倒不如选用其他更好的形式。

例如，在Windows桌面应用软件中，多级菜单几乎是所有软件中的标准配置，然而在最新版的Office 2007中，令很多人惊奇的一点是．Word、Excel这样命令繁多的软件中，竟然不再有菜单了，取而代之的是一种称为“Ribbon”的命令选择方式。微软公司称其为“Ribbon”的工具条，就是在很多网页中使用的Tab面板。它把各种原来需要在多级下拉菜单中选择的命令都以图标的形式放置在各个Tab页上，各个Tab页之间，可以自由切换。用户习惯于这种方式以后，恐怕再也不想用原来的多级菜单的命令选择方式了。

从10年前的Word 97开始，Office软件的用户界面就是众多软件模仿的目标，微软公司在软件的易用性上从来不惜花费大量的研发力量。可见，具体使用什么形式的用户界面和导航方式，并没有固定的标准，而是要根据实际软件和网页的需要来决定，使用最恰当的方式。

本教程后面也会专门介绍如何制作非常流行的Tab面板。使读者在做网页的时候，有更多可以选择的手段，制作出最恰到好处的网页。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表