素材牛VIP会员

纯CSS实现三级垂直导航效果

 所属分类:网页特效-导航菜单

 浏览:2262次  评论:2次  更新时间:2016-08-02
牛币素材VIP可免积分下载
纯CSS实现三级垂直导航效果
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:纯CSS实现的纵列三层导航效果

详细介绍

使用方法:

CSS样式部分(根据自身风格进行修改)

*{margin:0;padding:0;font-family:"微软雅黑"}
ul{list-style:none;background:#777}
.nav2{padding:0}
.nav3{padding:0}
.nav1{margin:100px 0 0 100px;padding:0}
.nav1 a{display:block;width:100px;height:36px;line-height:36px;text-decoration:none;color:#fff;text-align:center}
.nav1 a:hover{background:#ffaaaa;color:#000;transition:all 1s}
.nav1 li{position:relative}
li{text-align:center}
.nav1{width:110px}
.nav1 a{width:110px}
.li1:hover{background:#999}
.li2:hover{background:#bbb}
.li3:hover{background:#aaa}
.nav1 ul{position:absolute;left:109px;top:0;display:none}
.li1:hover .nav2{background:#999;display:block}
.li2:hover .nav3{background:#bbb;display:block}
.haizei .li2>a{width:110px}
.haizei .li3>a{width:120px}
.quanyecha .li2>a{width:130px}
.quanyecha .nav3{left:130px}
.quanyecha .li3>a{width:140px}
.huoying .li2>a{width:140px}
.huoying .li3>a{width:150px}
.huoying .nav3{left:140px}
.shumabaobei .li2>a{width:150px}
.shumabaobei .nav3{left:150px}
.shumabaobei .li3>a{width:160px}
.sishen .li2>a{width:120px}
.sishen .nav3{left:120px}
.sishen .li3>a{width:120px}

HTML部分

<div class="nav">
  <ul class="nav1">
      <li class="li1 haizei"><a href="">海贼王</a>
          <ul class="nav2">
              <li class="li2"><a href="">你好,海贼</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,海贼</a></li>
                      <li class="li3"><a href="">你好,海贼</a></li>
                      <li class="li3"><a href="">你好,海贼</a></li>
                      <li class="li3"><a href="">你好,海贼</a></li>
                      <li class="li3"><a href="">你好,海贼</a></li>
                  </ul>
              </li>
              <li class="li2"><a href="">你好,海贼1</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,海贼1</a></li>
                      <li class="li3"><a href="">你好,海贼1</a></li>
                      <li class="li3"><a href="">你好,海贼1</a></li>
                      <li class="li3"><a href="">你好,海贼1</a></li>
                      <li class="li3"><a href="">你好,海贼1</a></li>
                  </ul>
              </li>
              <li class="li2"><a href="">你好,海贼2</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,海贼2</a></li>
                      <li class="li3"><a href="">你好,海贼2</a></li>
                      <li class="li3"><a href="">你好,海贼2</a></li>
                      <li class="li3"><a href="">你好,海贼2</a></li>
                      <li class="li3"><a href="">你好,海贼2</a></li>
                  </ul>
              </li>
              <li class="li2"><a href="">你好,海贼3</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,海贼3</a></li>
                      <li class="li3"><a href="">你好,海贼3</a></li>
                      <li class="li3"><a href="">你好,海贼3</a></li>
                      <li class="li3"><a href="">你好,海贼3</a></li>
                      <li class="li3"><a href="">你好,海贼3</a></li>
                  </ul>
              </li>
              <li class="li2"><a href="">你好,海贼4</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,海贼4</a></li>
                      <li class="li3"><a href="">你好,海贼4</a></li>
                      <li class="li3"><a href="">你好,海贼4</a></li>
                      <li class="li3"><a href="">你好,海贼4</a></li>
                      <li class="li3"><a href="">你好,海贼4</a></li>
                  </ul>
              </li>
          </ul>				
      </li>
      <li class="li1 quanyecha"><a href="">犬夜叉</a>
          <ul class="nav2">
              <li class="li2"><a href="">你好,犬夜叉</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,犬夜叉</a></li>
                      <li class="li3"><a href="">你好,犬夜叉</a></li>
                      <li class="li3"><a href="">你好,犬夜叉</a></li>
                      <li class="li3"><a href="">你好,犬夜叉</a></li>
                      <li class="li3"><a href="">你好,犬夜叉</a></li>
                  </ul>
              </li>
              <li class="li2"><a href="">你好,犬夜叉1</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,犬夜叉1</a></li>
                      <li class="li3"><a href="">你好,犬夜叉1</a></li>
                      <li class="li3"><a href="">你好,犬夜叉1</a></li>
                      <li class="li3"><a href="">你好,犬夜叉1</a></li>
                      <li class="li3"><a href="">你好,犬夜叉1</a></li>
                  </ul>
              </li>
              <li class="li2"><a href="">你好,犬夜叉2</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,犬夜叉2</a></li>
                      <li class="li3"><a href="">你好,犬夜叉2</a></li>
                      <li class="li3"><a href="">你好,犬夜叉2</a></li>
                      <li class="li3"><a href="">你好,犬夜叉2</a></li>
                      <li class="li3"><a href="">你好,犬夜叉2</a></li>
                  </ul>
              </li>
              <li class="li2"><a href="">你好,犬夜叉3</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,犬夜叉3</a></li>
                      <li class="li3"><a href="">你好,犬夜叉3</a></li>
                      <li class="li3"><a href="">你好,犬夜叉3</a></li>
                      <li class="li3"><a href="">你好,犬夜叉3</a></li>
                      <li class="li3"><a href="">你好,犬夜叉3</a></li>
                  </ul>
              </li>
              <li class="li2"><a href="">你好,犬夜叉4</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,犬夜叉4</a></li>
                      <li class="li3"><a href="">你好,犬夜叉4</a></li>
                      <li class="li3"><a href="">你好,犬夜叉4</a></li>
                      <li class="li3"><a href="">你好,犬夜叉4</a></li>
                      <li class="li3"><a href="">你好,犬夜叉4</a></li>
                  </ul>
              </li>
          </ul>
      </li>
      <li class="li1 huoying"><a href="">火影忍者</a>
          <ul class="nav2">
              <li class="li2"><a href="">你好,火影忍者</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,火影忍者</a></li>
                      <li class="li3"><a href="">你好,火影忍者</a></li>
                      <li class="li3"><a href="">你好,火影忍者</a></li>
                      <li class="li3"><a href="">你好,火影忍者</a></li>
                      <li class="li3"><a href="">你好,火影忍者</a></li>
                  </ul>
              </li>
              <li class="li2"><a href="">你好,火影忍者1</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,火影忍者1</a></li>
                      <li class="li3"><a href="">你好,火影忍者1</a></li>
                      <li class="li3"><a href="">你好,火影忍者1</a></li>
                      <li class="li3"><a href="">你好,火影忍者1</a></li>
                      <li class="li3"><a href="">你好,火影忍者1</a></li>
                  </ul>
              </li>
              <li class="li2"><a href="">你好,火影忍者2</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,火影忍者2</a></li>
                      <li class="li3"><a href="">你好,火影忍者2</a></li>
                      <li class="li3"><a href="">你好,火影忍者2</a></li>
                      <li class="li3"><a href="">你好,火影忍者2</a></li>
                      <li class="li3"><a href="">你好,火影忍者2</a></li>
                  </ul>
              </li>
              <li class="li2"><a href="">你好,火影忍者3</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,火影忍者3</a></li>
                      <li class="li3"><a href="">你好,火影忍者3</a></li>
                      <li class="li3"><a href="">你好,火影忍者3</a></li>
                      <li class="li3"><a href="">你好,火影忍者3</a></li>
                      <li class="li3"><a href="">你好,火影忍者3</a></li>
                  </ul>
              </li>
              <li class="li2"><a href="">你好,火影忍者4</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,火影忍者4</a></li>
                      <li class="li3"><a href="">你好,火影忍者4</a></li>
                      <li class="li3"><a href="">你好,火影忍者4</a></li>
                      <li class="li3"><a href="">你好,火影忍者4</a></li>
                      <li class="li3"><a href="">你好,火影忍者4</a></li>
                  </ul>
              </li>
          </ul>
      </li>
      <li class="li1 shumabaobei"><a href="">数码宝贝</a>
          <ul class="nav2">
              <li class="li2"><a href="">你好,数码宝贝</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,数码宝贝</a></li>
                      <li class="li3"><a href="">你好,数码宝贝</a></li>
                      <li class="li3"><a href="">你好,数码宝贝</a></li>
                      <li class="li3"><a href="">你好,数码宝贝</a></li>
                      <li class="li3"><a href="">你好,数码宝贝</a></li>
                  </ul>
              </li>
              <li class="li2"><a href="">你好,数码宝贝1</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,数码宝贝1</a></li>
                      <li class="li3"><a href="">你好,数码宝贝1</a></li>
                      <li class="li3"><a href="">你好,数码宝贝1</a></li>
                      <li class="li3"><a href="">你好,数码宝贝1</a></li>
                      <li class="li3"><a href="">你好,数码宝贝1</a></li>
                  </ul>
              </li>
              <li class="li2"><a href="">你好,数码宝贝2</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,数码宝贝2</a></li>
                      <li class="li3"><a href="">你好,数码宝贝2</a></li>
                      <li class="li3"><a href="">你好,数码宝贝2</a></li>
                      <li class="li3"><a href="">你好,数码宝贝2</a></li>
                      <li class="li3"><a href="">你好,数码宝贝2</a></li>
                  </ul>
              </li>
              <li class="li2"><a href="">你好,数码宝贝3</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,数码宝贝3</a></li>
                      <li class="li3"><a href="">你好,数码宝贝3</a></li>
                      <li class="li3"><a href="">你好,数码宝贝3</a></li>
                      <li class="li3"><a href="">你好,数码宝贝3</a></li>
                      <li class="li3"><a href="">你好,数码宝贝3</a></li>
                  </ul>
              </li>
              <li class="li2"><a href="">你好,数码宝贝4</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,数码宝贝4</a></li>
                      <li class="li3"><a href="">你好,数码宝贝4</a></li>
                      <li class="li3"><a href="">你好,数码宝贝4</a></li>
                      <li class="li3"><a href="">你好,数码宝贝4</a></li>
                      <li class="li3"><a href="">你好,数码宝贝4</a></li>
                  </ul>
              </li>
          </ul>
      </li>
      <li class="li1 sishen"><a href="">死神</a>
          <ul class="nav2">
              <li class="li2"><a href="">你好,死神</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,死神</a></li>
                      <li class="li3"><a href="">你好,死神</a></li>
                      <li class="li3"><a href="">你好,死神</a></li>
                      <li class="li3"><a href="">你好,死神</a></li>
                      <li class="li3"><a href="">你好,死神</a></li>
                  </ul>
              </li>
              <li class="li2"><a href="">你好,死神1</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,死神1</a></li>
                      <li class="li3"><a href="">你好,死神1</a></li>
                      <li class="li3"><a href="">你好,死神1</a></li>
                      <li class="li3"><a href="">你好,死神1</a></li>
                      <li class="li3"><a href="">你好,死神1</a></li>
                  </ul>
              </li>
              <li class="li2"><a href="">你好,死神2</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,死神2</a></li>
                      <li class="li3"><a href="">你好,死神2</a></li>
                      <li class="li3"><a href="">你好,死神2</a></li>
                      <li class="li3"><a href="">你好,死神2</a></li>
                      <li class="li3"><a href="">你好,死神2</a></li>
                  </ul>
              </li>
              <li class="li2"><a href="">你好,死神3</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,死神3</a></li>
                      <li class="li3"><a href="">你好,死神3</a></li>
                      <li class="li3"><a href="">你好,死神3</a></li>
                      <li class="li3"><a href="">你好,死神3</a></li>
                      <li class="li3"><a href="">你好,死神3</a></li>
                  </ul>
              </li>
              <li class="li2"><a href="">你好,死神4</a>
                  <ul class="nav3">
                      <li class="li3"><a href="">你好,死神4</a></li>
                      <li class="li3"><a href="">你好,死神4</a></li>
                      <li class="li3"><a href="">你好,死神4</a></li>
                      <li class="li3"><a href="">你好,死神4</a></li>
                      <li class="li3"><a href="">你好,死神4</a></li>
                  </ul>
              </li>
          </ul>
      </li>
  </ul>
</div>

讨论这个素材(2)回答他人问题或分享使用心得会奖励牛币

捂***功  
2016年08月09日

就是不知道兼容性怎么样

回复
陌***人  
2016年10月05日

兼容IE7,应该没问题

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)