9.2 制作下拉菜单(1)

一、菜单的HTML结构

下面就来定义菜单的HTML结梅。思路是把整个菜单分为4组，每一组在平常状态时，只显示一级菜单项，当鼠标指针经过时，显示相应的子菜单。首先用ul和li定义出外层结构，然后在每个li项目中，使用dI定义一个菜单项，一级菜单文字定义为dt．子菜单的文字定义为dd。代码如下。

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

<body>
<ul id="menu">
<li>
<dl>
<dt><a href="#">Artech Studio</a></dt>
<dd><a href="#">Web Dev</a></dd>
<dd><a href="#">Web Design</a></dd>
<dd><a href="#">Books</a></dd>
<dd><a href="#">Contact Us</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">Artech Store</a></dt>
<dd><a href="#">Books</a></dd>
<dd><a href="#">DVDs</a></dd>
<dd><a href="#">Movies</a></dd>
<dd><a href="#">Service</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">Artech Achi</a></dt>
<dd><a href="#">Landscape</a></dd>
<dd><a href="#">Plan</a></dd>
<dd><a href="#">Design</a></dd>
<dd><a href="#">Maps</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">Artech Science</a></dt>
<dd><a href="#">Physics</a></dd>
<dd><a href="#">Maths</a></dd>
<dd><a href="#">Chemistry</a></dd>
<dd><a href="#">Courses</a></dd>
</dl>
</li>
</ul>
</body>

可以看到每组li中，第一行文字和后面的文字之间有所区别。下面就开始进行CSS样式设置了。

二、对整体进行设置

① 首先需要对菜单进行整体设置，为上面的代码中的ul设定一个id，代码如下。

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

<ul id="menu">

② 对ul做常规的CSS设置，将margin、padding清零；设定同定宽度610像素，因为每个菜单项要设为150像素宽，再加上一些间隔，所以这里设置610像素；此外清除列表项前面的圆点。lodidance.com

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

#menu {
margin:0;
padding:0;
width:610px;
list-style-type:none;
font:14px Arial;
}

③ 对每一个li项目进行设置。设置微向左浮动，以实现横向排列；设定宽度、margin和padding，这里将右边的margin设置为l像素，使各个菜单项之间间隔l像素。然后，把定位方式设置为相对定位，也使它的下级埘象(dl)能够以它为基准进行绝对定位。

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

#menu li {
float:left;
padding:0;
margin:0 1px 0 0;
width:150px;
}

在浏览器中的效果如图1所示，可以看到菜单已经横向排列了。

图1 各li横向排列

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

三、对dl进行设置

接下来，对dl对象设置样式，代码如下。

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

/* 设置菜单项*/
#menu li dl {
width:150px;/*ie6*/
margin: 0;
padding: 0 0 10px 0;
background: #cb6 url(images/bottom.gif) no-repeatbottom left;
}

此时在浏览器中的效果可以看到每个菜单项都增加了背景色，同时下端还产生了圆角的效果，这是如何实现的呢？

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

分析：下面分析一下其中的这个语句：

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

background: #cb6 url(images/bottom.gif) no-repeat bottom left;

这句话同时设置了背景色（#cb6）和背景图像（图像文件地址为“images/botiom.gif”)。CSS规定，在这种情况下，背景图像覆盖到的地方显示背景图像，而背景图一像投有覆盖的地方则显示背景色。这里的图像只显示一次，即不平铺（no-repeat），并且放置在菜单项的最底下（bottom）。此时，这个图像除了在两侧的圆角位置为白色之外．其他位置都是透明的，这样透明的位置就显示出了背景色，而圆角位置则显示出了两个圆角。

分析：在对dl的设置中，下面有10像素高的padding，圆角图像就在padding中。除了美观之外，padding的作用是，当菜单完全做好以后，子菜单只有在鼠标指针经过时才会显示出米。访问者要选择最下面的菜单项时，如果鼠标指针稍徽超出了下边界，菜单就会立即被隐藏起来，这样在易用性上就会存在缺陷。这里设置一个10像素的padding，这样即使稍稍超出菜单项范围，整个菜单也不至于立即消失。

读者可以试验以下，在Windows程序中，比如Word中，打开一和菜单以后，即使鼠标指针离开菜单范围，菜单也不会消失，只有当鼠标指针在莱单外单击一下，菜单才会消失。但是目前在网页上不能开发出和Windows程序一样的完善用户界面。近几年很多新技术的出现，包括CSS、Ajax等，都是在努力使Web应用的用户体硷更好。甚至达到本地程序的水平。因此，在进行Web设计和开发的时候，需要注意的不仅仅是美观和功能，实际上易用性等方面也在很多细节之中体现出来，希望读者能够注意到这一点。

四、对主菜单项(dt)进行设置

现在对主菜单项进行设置。lodidance.com

① 使用和上面相同的方法设置圆角，此外在主菜单项的下面设置一条暗红色的边框，作为和子菜单的分割，代码如下。

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