首页 > 代码库 > 9.3 制作下拉菜单(2)
9.3 制作下拉菜单(2)
一、对子菜单项(dd)进行设置 设置子菜单项的样式分为3步。 ① 首先对每个子菜单项,也就是dd元素进行常规设置,包括文字颜色、背景色等,代码如下。 折叠CSS 代码复制内容到剪贴板
② 为了使最下面的dd的下端和dI的下侧padding之间有一条暗红色分割线,设置1像素的下边框,代码如下。它在视觉上与上面的分割线相呼应,同时也提示了访问者有效的点击位置。 折叠CSS 代码复制内容到剪贴板
这段代码设置了另一个新的类别,last,因此除了这里的CSS代码之外还需要在HTML中把每组子菜单的最下面一项指定为class=last。例如: 折叠XML/HTML 代码复制内容到剪贴板
③ 设置子菜单连接的样式,这里设置了一个小三角形图像作为背景,代码如下。lodidance.com 折叠CSS 代码复制内容到剪贴板
此时,在浏览器中的效果可以看到,下拉菜单的样式已经做好了。下面就要设置与鼠标响应相关的内容了。 二、对鼠标响应进行设置 ① 首先把子菜单隐藏起来,也就是把所有的dd隐藏起来,代码如下。 折叠CSS 代码复制内容到剪贴板
注意:此时在Firefox或者IE 7浏览器中的效果如图1所示,已经可以实现鼠标指针经过时打开子菜单了。但是如果使用IE 6浏览器,就不会打开子菜单,因为IE 6浏览器器中的“:hover"伪类只对a标记有效,对li是无效的。因此这里先在Firefox中进行调试,后面再介绍如何在IE 6浏览器中调试。 图1 显示子菜单 折叠CSS 代码复制内容到剪贴板
读者可以参考网页学习网CSS教程中这个步骤完成后的“第9章/final-4.5.htm”文件。 三、实现主菜单项的不同颜色 方法和前面制作跳起的多彩菜单的方法是相同的,这里作为复习。 ① 改造HTML代码,方法是在每个dI中,为dt增加一个不同的类别,例如橙色的菜单项代码如下: 折叠XML/HTML 代码复制内容到剪贴板
② 在对dt的设置中删除对背景的设置,因为这是共性设置,修改后代码如下: 折叠CSS 代码复制内容到剪贴板
③ 在共性设置的后面,针对这4个新增的类别设置其背景色的CSS样式。代码如下。lodidance.com 折叠CSS 代码复制内容到剪贴板
读者可以参考光盘中这个步骤完成后的“第9章\final-5.htm”文件。此时,在Firefox和IE8中的效果如图1所示。 图2 设置多彩效果 点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表 |
编辑:网页学习网 |
本文地址:http://www.lodidance.com/css/jc/731.html |