纯CSS实现多级导航联动（附图文示例）

dell

2022-08-05

0 查看

收藏已收藏已移除 0

前言

导航栏之前也做过……但都是很简单的一级导航栏或者用JQ实现的二级导航栏。但是关于页面展示的东西，还是应该由CSS来实现，JavaScript应该多负责动作。【推荐：css视频教程】

首先是二级导航栏，例如这样的：

这里写图片描述
之前一直不明白……其实这种东西说穿了很简单……。

主要的地方在于：

1.整个导航的结构应该是怎么样的

2.不用JS的情况下，如何让鼠标移到一级导航时，显示出二级导航。

3.二级导航栏的定位。

分析：

1.较为主流的做法应该是使用ul标签。每个ul标签为一个导航级，里面的li为子项目，li里面又包含a标签和ul标签，a标签用于点击跳转，ul为下一级的导航栏，以此类推……

2.鼠标移动到一级导航栏上，显示出二级导航栏，第一反应是hover伪类，按照之前的理解，hover用于控制自身的改变，怎么样才能控制子元素的样式呢？其实这样就可以了：

    #nav li:hover ul{             display: block;         }