css实现导航菜单下拉效果（纯CSS实现三级下拉菜单）

头部导航条布局

html代码：

<!DOCTYPE html><html><head>

<title>头部导航条制作</title>

</head>

<body>

<li><a href="#">web前端</a></li>

</ul>

</div>

</body>

</html>

用无序列表制作头部导航条：

无序列表是上下布局排列的，那我们需要思考的是让他左右布局的方式排列
左右排列的方式我们所用的是float:left;浮动的方法让li左右布局
.navbox{
width:960px;
height:40px;
margin:20pxauto;
background:#08c;
}
.navbox >ul>li{
float: left;
width:160px;
height:40px;
line-height:40px;
text-align: center;
font-size:16px;
}

鼠标移入时实现颜色的变换

HTML代码：

<li><a href="#">web前端</a></li>

</ul></div>

思路：

鼠标移入时每个<li>显示为另一种颜色background: #00bfff;

css代码：

.navbox ul li a{ display: block; color: #fff; background: #08c;}.navbox ul li a:hover{ text-decoration: none; background: #00bfff;}

下拉菜单实现

html：

<li><a href="#">web前端</a>

<li><a href="#">JavaScript</a></li>

</ul>

</li>

</ul>

</div>

思路：

在一级菜单web前端下实现二级菜单<ul class="subnav">

html
css
JavaScript

当鼠标移入菜单时web前端时显示二级菜单，移出时隐藏；

CSS代码实现：

.subnav{ display: none;}/*鼠标没有移入“web前端”选项栏时二级菜单隐藏*/.navbox ul li:hover .subnav{ display: block;}/*当鼠标移入“web前端”选项栏时显示二级菜单*/

三级菜单实现

HTML

<li><a href="#">web前端</a>

</ul>

</li>

<li><a href="#">JavaScript</a></li>

</ul>

</li>

</ul>

</div>

思路：

前面与二级菜单思路相似唯一不同的是三级菜单显示的位置。

我们看看css的绝对定位与相对定位这篇文章

CSS代码：

.subnav>li{ position: relative;}.threenav{ position: absolute; top: 0; left: 160px; width: 160px;}.subnav, .threenav{ display: none;}.subnav li:hover .threenav{ display: block;}

最后实现的效果如下图：

css实现导航菜单下拉效果（纯CSS实现三级下拉菜单）(1)

css实现导航菜单下拉效果（纯CSS实现三级下拉菜单）

最新推荐

热门推荐