怎样使用css制作下拉菜单

 时间:2024-10-14 20:52:12

1、首先我们需要打开自己电脑上的DW软件,新建一个html页面,然后将其保存在桌面上。

怎样使用css制作下拉菜单

2、接下来我们需要在body里面添加DIV标签,并在其内使用ul无序列表和li标签制作一个一级菜单栏,代码和浏览器的效果如下面两张图片所示。

怎样使用css制作下拉菜单
怎样使用css制作下拉菜单

3、因为菜单栏一般都是有链接的,我们就需要为每个li标签添加一个a标签,并增加适当的样式。使得鼠标移到链接上面时有明显的颜色变化。

怎样使用css制作下拉菜单
怎样使用css制作下拉菜单

4、截止到上一步我们的一级菜单栏已经制作完成,接下来我们需要制作二级菜单栏。我们在有二级菜单栏的一级菜单栏的li标签下面添加ul再添加li标签就可以制作二级菜单了。

5、关于二级菜单的代码以及css样式,和在浏览器中的显示效果如下图所示。

怎样使用css制作下拉菜单
怎样使用css制作下拉菜单
怎样使用css制作下拉菜单

6、大家可以看到,这是静态的二级菜单,二级菜单会一直在网页当中显示,那么我们应该怎样让其先隐藏然后鼠标滑过一级菜单后再显示呢?

7、其实,这只需要我们为二级菜单的ul标签设置display的none和block两个属性就可以。默认情况下设置二级ul的display属性为none;鼠标滑过时dispaly属性为block。

怎样使用css制作下拉菜单
怎样使用css制作下拉菜单
怎样使用css制作下拉菜单

8、这样一个二级菜单就制作完成了,想让其他的一级菜单下面也有二级菜单显示,我们只需要复制相应的代码就可以了。

怎样使用css制作下拉菜单
怎样使用css制作下拉菜单
  • 设置GridView表头颜色
  • 如何使用HTML加CSS写一个导航栏呢?
  • 纯css3实现关闭按钮
  • HTML表单教程 文本框的使用
  • 如何新建一个HTML模板?
  • 热门搜索
    生物手抄报图片 五年级手抄报大全 一年级数学手抄报内容 关于运动会的手抄报 动物世界手抄报 科学小常识手抄报 道路交通安全手抄报 安全手抄报图案 莲文化手抄报 学会感恩手抄报图片