9.1 HTML中的dl、dt和dd标记

本章中，我们将在前面两章的基础上，制作出更为复杂的下拉菜单。当网站的内容比较丰富，结构比较复杂的时候，一级导航的菜单往往就不够用了，这时就需要多级菜单来实现层级结构。实际上任何使用电脑的人对下拉菜单都不会陌生，几乎所有的软件都会通过菜单为用户提供操作的命令接口。

在早期的网站上，制作多级的菜单是件很麻烦的事情，而且不易维护。但是近年来，由于CSS不断普及，使用CSS制作的菜单已经可以非常方便地为网站带来清晰的导航支持。

本案例就来制作一个下拉菜单。图9.1所示为鼠标离开菜单时子菜单未打开的效果，图1所示为一个子菜单打开后的效果。

图1 显示子菜单时的效果

这里介绍一组HTML标记-dl，dt和dd。这组标记不像ul和li标记那么常用，但是用于定义本案例中的结构是非常合适的。

dl、dt、dd这组标记和ul、li非常类似，也用于列表结构。dl被称为“定义列表”(definitionlist)，在使用方法上相当于ul；dt和dd分别称为“定义标题”(definition title)和“定义描述”（definition description），它们在使用方法上相当于li。例如有下面一段HTML代码：

在浏览器中的效果如图1所示。可以看到dl相当于u1，dt和dd相当于li．区别在于dt和dd会被区别对待。如果希望菜单具有子菜单，就可以把主菜单的菜单项文字定义为dt，下属于菜单中的菜单项定义为dd。

图1 使用“定义列表”

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