css实现导航菜单下拉效果（纯CSS实现三级下拉菜单）
头部导航条布局
html代码：
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>头部导航条制作</title>
<link rel="stylesheet" type="text/CSS" href="css/master8.css">
</head>
<body>
<div class="navbox">
<ul class="clearfix">
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">web前端</a></li>
<li><a href="#">前端新闻</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">关于我们</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
-
css
-
JavaScript
当鼠标移入菜单时
web前端时显示二级菜单，移出时隐藏；CSS代码实现：
鼠标移入时实现颜色的变换
HTML代码：
<div class="navbox">
<ul class="clearfix">
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">web前端</a></li>
<li><a href="#">前端新闻</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">关于我们</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：
<div class="navbox">
<ul class="clearfix">
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">web前端</a>
<ul class="subnav">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#">前端新闻</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
思路：
在一级菜单web前端下实现二级菜单<ul class="subnav">
.subnav{ display: none;}/*鼠标没有移入“web前端”选项栏时二级菜单隐藏*/.navbox ul li:hover .subnav{ display: block;}/*当鼠标移入“web前端”选项栏时显示二级菜单*/
三级菜单实现
HTML
<div class="navbox">
<ul class="clearfix">
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">web前端</a>
<ul class="subnav">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a>
<ul class="threenav">
<li><a href="#">css1</a></li>
<li><a href="#">css2</a></li>
<li><a href="#">css3</a></li>
</ul>
</li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#">前端新闻</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">关于我们</a></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;}
最后实现的效果如下图：
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
