纯CSS二级下拉导航菜单实

快乐打工仔 分类:实例代码

二级下拉菜单在众多的网站都有应用,能有效的组织分类,且能节省大量空间。

当前很多二级导航菜单是结合JavaScript实现,本章节介绍一下使用纯css实现的下拉菜单。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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属性值,以此实现下拉菜单效果。

纯CSS二级下拉导航菜单实,这样的场景在实际项目中还是用的比较多的,关于纯CSS二级下拉导航菜单实就介绍到这了。

纯CSS二级下拉导航菜单实属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容