9.3 制作下拉菜单(2)

一、对子菜单项(dd)进行设置

设置子菜单项的样式分为3步。

① 首先对每个子菜单项，也就是dd元素进行常规设置，包括文字颜色、背景色等，代码如下。

② 为了使最下面的dd的下端和dI的下侧padding之间有一条暗红色分割线，设置1像素的下边框，代码如下。它在视觉上与上面的分割线相呼应，同时也提示了访问者有效的点击位置。

这段代码设置了另一个新的类别,last，因此除了这里的CSS代码之外还需要在HTML中把每组子菜单的最下面一项指定为class=last。例如：

③ 设置子菜单连接的样式，这里设置了一个小三角形图像作为背景，代码如下。lodidance.com

此时，在浏览器中的效果可以看到，下拉菜单的样式已经做好了。下面就要设置与鼠标响应相关的内容了。

二、对鼠标响应进行设置

① 首先把子菜单隐藏起来，也就是把所有的dd隐藏起来，代码如下。

注意：此时在Firefox或者IE 7浏览器中的效果如图1所示，已经可以实现鼠标指针经过时打开子菜单了。但是如果使用IE 6浏览器，就不会打开子菜单，因为IE 6浏览器器中的“:hover"伪类只对a标记有效，对li是无效的。因此这里先在Firefox中进行调试，后面再介绍如何在IE 6浏览器中调试。

图1 显示子菜单

读者可以参考网页学习网CSS教程中这个步骤完成后的“第9章/final-4.5.htm”文件。

三、实现主菜单项的不同颜色

方法和前面制作跳起的多彩菜单的方法是相同的，这里作为复习。

① 改造HTML代码，方法是在每个dI中，为dt增加一个不同的类别，例如橙色的菜单项代码如下：

② 在对dt的设置中删除对背景的设置，因为这是共性设置，修改后代码如下：

③ 在共性设置的后面，针对这4个新增的类别设置其背景色的CSS样式。代码如下。lodidance.com

读者可以参考光盘中这个步骤完成后的“第9章\final-5.htm”文件。此时，在Firefox和IE8中的效果如图1所示。

图2 设置多彩效果

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