html中的下拉菜单栏,CSS下拉菜单

CSS下拉菜单

随着时代的发展，网站的内容也变得越来越丰富，当结构比较复杂的时候，一级导航的菜单就不再够用了，这时我们就需要多级菜单来实现层次结构。下面我们就来讲一下有关下拉菜单的相关内容。

现在我们介绍一组HTML标记——dl、dt和dd。这组标记和ul、li非常相似，也用于列表结构。dl被称为“定义列表”，在使用方法上相当于ul；dt和dd分别定义为“定义标题”和“定义描述”，它们在使用方法上相当于li。比如以下代码：

锐英源软件培训项目

Java

网站开发

VC++

C#

ASP.NET

锐英源软件培训特色

目的鲜明

层次深

价格适中

有就业保障

目的鲜明

此时在浏览器中的效果如下：

下面我们来讲一下下拉菜单的大致制作步骤：

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

对整体进行设置：首先为上面的ul设一个id，并做常规CSS设置，还要清除列表项前面的圆点。对每一个li项目进行设置，并把定位方式设置为相对定位，使它的下级对象以它为基准进行绝对定位。

对dl进行设置：对dl对象设置样式，增加背景色和圆角效果。

对主菜单项(dt)进行设置：设置圆角并在主菜单项的下面设置一条暗红色的边框，作为和子菜单的分割；对主菜单项的链接文字进行设置。

对子菜单项(dd)进行设置：对子菜单项进行常规设置，比如文字颜色、背景色等。

对鼠标相应进行设置：把子菜单隐藏起来；对li使用hover伪类，接受鼠标经过事件；

实现主菜单项的不同颜色：改造HTML代码，方法是在每个dl中，为dt增加一个不同的类别；在对dt的设置中删除对背景的设置，因为它是共性设置；在共性设置后面设置背景色的CSS样式。

IE6兼容：可以在文件中添加或修改代码以便实现浏览器兼容。

以上就是一个比较复杂的可以实现鼠标指针经过时打开子菜单的导航条，有兴趣的朋友可以自己动手做一下。