7.5 带说明信息的菜单

现在在7.4节案例的基础上，制作一个能够显示说明信息的菜单，如图1所示。鼠标指针经过某一个菜单项的时候，会出现相应的说明信息。

该实例文件位于网页学习网CSS教程资源的“第7章\05\tip-navi.htm”。

图1 带说明信息的菜单效果

在通常的状态下，这个菜单和7.4节中制作的菜单完全相同。而在鼠标指针经过菜单项的时候，在菜单右侧会出现一个矩形区域，里面分别写着对正在经过的菜单项的说明文字，这是一个很实用的效果。

一、基本思路

如果对7.4节的内容理解了，本案例的解决方法就很容易能想到。仍然是使用“钩子”的方法实现。

以7.4节案例的代码为基础，对于每一个菜单项的a元素，分别再增加一个span元素，里面输入相应的说明文字，代码如下（这里指摘录了前两个菜单项的内容，其他3个菜单项的实现是完全相同的）。lodidance.com

接下来的基本思路是，首先在默认状态下，把这些说明信息隐藏起来，当鼠标指针经过某一个菜单项的时候，再打开该span就可以了。

二、设置方法

由于本例是在7.4节案例的基础上完成的，因此对其修改的内容并不多，这里就把CSS样式代码全部抄录，然后选择修改的位置进行讲解。如果读者对7.4节的案例还有不清楚的地方，也可以参考这里完整的代码。

首先观察第3段代码，也就是为“#menu a span”设置的CSS样式，它的作用是在普通状态下，将所有span元素都隐藏起来，使用的CSS语句是：lodidance.com

接着观察最后一段代码，它的作用是设定说明信息span的具体样式。其中的设置方法，包括定位的方法，都与上一节中的案例相同。使用绝对定位，以a元素为定位基准。

需要注意的是关于height的设置。这里将height的值设置为auto，如果没有这一行，在Firefox中的效果将会显示不全，因此这里设为auto，以使它的高度适应文字的需要，这时效果就如图1所示了。

本章重点

在这一章里，制作了5个竖直方向的导航菜单。需要读者特别注意的有以下几个CSS基础知识和技巧。

(1) 相邻盒子的margin在竖直方向相遇时的“塌陷”现象，水平方向则没有该现象。

(2) 在一系列盒子排列后，如何对头尾盒子进行单独的样式设置，可以为它们单独设置类别，或者是伪类，但需要注意浏览器对伪类的支持情况。

(3) 通过粗边框的颜色设置可以产生出斜角效果，如果充分利用可以产生有趣的效果。

(4) 为了防止鼠标指针经过时造成边框的跳动，可以在通常状态添加与背景色相同的边框。

(5) 相对定位的含义是以自身原来所在位置为基准进行偏移。

(6) “包含块”的定义方法，绝对定位是以包含块为基准进行偏移的。

(7)为了使某个盒子绝对定位，它的上一级元素可以设为相对定位．从而变成“包含块”。

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