导航栏三级菜单html纯CSS实现三级下拉菜单

html代码：

<!DOCTYPE html><html><head>

导航栏三级菜单html纯CSS实现三级下拉菜单 JavaScript

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

</head>

<body>

<li><a href=\公众#\"大众>web前端</a></li>

</ul>

</div>

</body>

</html>

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

无序列表是高下布局排列的，那我们须要思考的是让他旁边布局的办法排列

旁边排列的办法我们所用的是float:left;浮动的方法让li旁边布局

CSS样式：

.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;}

末了实现的效果如下图：

导航栏三级菜单html纯CSS实现三级下拉菜单

哥哥先哄她作者

html5网站布局教程还在用div结构若何更专业的网页结构 HTML进阶

html半透明背景css配景半透明边框和内容不透明

导航栏三级菜单html纯CSS实现三级下拉菜单

哥哥先哄她作者

html5网站布局教程还在用div结构若何更专业的网页结构 HTML进阶

html半透明背景css配景半透明边框和内容不透明

猜你喜欢