首页 > 代码库 > 9.3 制作下拉菜单(2)

9.3 制作下拉菜单(2)

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

设置子菜单项的样式分为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 显示子菜单
图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.     padding5px;    
  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 设置多彩效果
图2 设置多彩效果

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

编辑:网页学习网
本文地址:http://www.lodidance.com/css/jc/731.html