纯CSS实现的二级下拉导航菜单实例代码_html/css

纯CSS实现的二级下拉导航菜单实例代码_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:30:21

原创

2714人浏览过

纯css实现的二级下拉导航菜单实例代码:
二级下拉菜单在众多的网站都有应用，不但能够有效的组织分类导航，并且能够节省大量的网站空间，也能够实现网站的动态化效果，大多数二级导航菜单都是结合javascript实现，本章节介绍一下使用纯css实现的下拉菜单。
代码如下:

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.navigator{  width:80%;  margin:0;}.navigator ul{  padding:0;  margin:0;  list-style-type:none;}.navigator li{  float:left;  position:relative;}.navigator ul li a, .navigator ul li a:visited {  display:block;  text-align:center;  text-decoration:none;  width:184px;  height:50px;  color:black;  border:1px solid #fff;  border-width:1px 1px 0 0;  background:#CCCCCC;  line-height:50px;  font-size:17px;}.navigator ul li:hover a{  color:#fff;  background:#CCCCFF;}.navigator ul li ul{  display:none;}.navigator ul li:hover ul{  display:block;  position:absolute;  top:51px;  left:0;  width:185px;}.navigator ul li:hover ul li a{  display:block;  background:#CCFFFF;  color:#000;}.navigator ul li:hover ul li a:hover {  background:#dfc184;  color:#000;}</style></head><body><div class="navigator">  <ul>    <li> <a >蚂蚁部落</a>      <ul>        <li><a href="#">div css教程</a></li>        <li><a href="#">javascript教程</a></li>        <li><a href="#">jQuery教程</a></li>        <li><a href="#">html教程</a></li>        <li><a href="#">json教程</a></li>        <li><a href="#">ajax教程</a></li>      </ul>    </li>    <li> <a href="#">后台教程</a>      <ul>        <li><a href="#">asp教程</a></li>        <li><a href="#">asp.net教程</a></li>        <li><a href="#">php教程</a></li>        <li><a href="#">jsp教程</a></li>      </ul>    </li>    <li> <a href="#">交流专区</a>      <ul>        <li><a href="#">seo交流</a></li>        <li><a href="#">网站运营</a></li>        <li><a href="#">百度优化</a></li>        <li><a href="#">谈天说地</a></li>        <li><a href="#">网站排名</a></li>      </ul>    </li>  </ul></div></body></html>

登录后复制

立即学习“前端免费学习笔记（深入）”；

以上代码实现了我们的要求，利用纯css实现了下拉导航菜单效果，在低版本的IE浏览器中有兼容性问题，不过也无需担心，因为很快就不必为此担忧，IE6的用户会越来越少，下面简单介绍一下它的实现原理。
实现原理:
1.主导航水平排列:
主导航水平排列效果实现非常简单，只要将最外层li元素添加浮动即可。
2.核心结构:

立即学习“前端免费学习笔记（深入）”；

<li> <a >蚂蚁部落</a>      <ul>        <li><a href="#">div css教程</a></li>        <li><a href="#">javascript教程</a></li>        <li><a href="#">jQuery教程</a></li>        <li><a href="#">html教程</a></li>        <li><a href="#">json教程</a></li>        <li><a href="#">ajax教程</a></li>      </ul></li>

登录后复制

立即学习“前端免费学习笔记（深入）”；

在默认状态下，内层的ul元素是隐藏的，也就是默认状态下只会显示主导航，当鼠标悬浮在主导航上的时候内层ul元素会处于显示状态，并且将其设置为绝对定位同时，调整left和top属性值，以此实现下拉菜单效果。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12909

更多内容可以参阅:http://www.softwhy.com/divcss/

立即学习“前端免费学习笔记（深入）”；