9.3 制作下拉菜单(2)

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

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

折叠展开CSS 代码复制内容到剪贴板

1. /* 设置菜单项的dd */
2. #menu li dd {
3. margin:0;
4. padding:0;
5. color: #fff;
6. background: #47a;
7. }

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

折叠展开CSS 代码复制内容到剪贴板

1. #menu li dd.last {
2. border-bottom:1px solid #b00;
3. }

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

折叠展开XML/HTML 代码复制内容到剪贴板

1. <dd class="last"><a href="#">Contact Us</a></dd>

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

折叠展开CSS 代码复制内容到剪贴板

1. #menu li dd a, #menu li dd a:visited {
2. height:1em;
3. display:block;
4. color:#fff;
5. text-decoration:none;
6. padding:4px 5px 4px 20px;
7. background: #47a url(images/arrow.gif) no-repeat 10px 10px;
8. }

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

二、对鼠标响应进行设置

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

折叠展开CSS 代码复制内容到剪贴板

1. #menu li dd { display:none;}

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

图1 显示子菜单

折叠展开CSS 代码复制内容到剪贴板

1. #menu li dd a:hover {
2. background: #147;
3. color:#9cf;
4. }

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

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

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

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

折叠展开XML/HTML 代码复制内容到剪贴板

1. <dl>
2. <dt class="orange"><a href="#">Artech Studio</a></dt>
3. <dd><a href="#">Web Dev</a></dd>
4. <dd><a href="#">Web Design</a></dd>
5. <dd><a href="#">Books</a></dd>
6. <dd class="last"><a href="#">Contact Us</a></dd>
7. </dl>

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

折叠展开CSS 代码复制内容到剪贴板

1. /* 设置菜单项的dt */
2. #menu li dt {
3. margin:0;
4. padding: 5px;
5. text-align:center;
6. border-bottom:1px solid #b00;
7. }

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

折叠展开CSS 代码复制内容到剪贴板

1. #menu li dt.orange { background:#fa5 url(images/top.gif) no-repeat top left;}
2. #menu li dt.yellow { background:#ee5 url(images/top.gif) no-repeat top left;}
3. #menu li dt.green  { background:#5e5 url(images/top.gif) no-repeat top left;}
4. #menu li dt.blue   { background:#5cf url(images/top.gif) no-repeat top left;}

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

图2 设置多彩效果

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