Home > Article > Web Front-end > 纯CSS实现的二级下拉导航菜单实例代码_html/css_WEB-ITnose
纯CSS实现的二级下拉导航菜单实例代码_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:30:212306browse
纯CSS实现的二级下拉导航菜单实例代码:
二级下拉菜单在众多的网站都有应用，不但能够有效的组织分类导航，并且能够节省大量的网站空间，也能够实现网站的动态化效果，大多数二级导航菜单都是结合javascript实现，本章节介绍一下使用纯css实现的下拉菜单。
代码如下:
<!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/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：求教实现将下面三张图片自适应浏览器宽度，就是把浏览器缩小后宽度依然铺满屏幕。_html/css_WEB-ITnoseNext article：第一次执行jq后页面会往左偏移一点？_html/css_WEB-ITnose