CSS垂直三級導航選單

antzone發表於2018-07-03
CSS

下面是一段使用css實現的三級垂直導航選單效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.nav1 {
  margin: 100px 0 0 50px;
}
* {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-family: '微軟雅黑';
}
ul {
  list-style: none;
  background: #777;
}
.nav1 a {
  display: block;
  text-decoration: none;
  width: 110px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  color: #000;
}
.nav3 a {
  width: 230px;
}
.nav1 a:hover {
  background-color: #f00;
  color: #fff;
}
.nav1 li {
  position: relative;
}
.nav1 {
  width: 110px;
}
.li1:hover {
  background-color: #999;
}
.li2:hover {
  background-color: #bbb;
}
.nav1 ul {
  position: absolute;
  left: 109px;
  top: 0px;
  display: none;
}
.li1:hover .nav2 {
  display: block;
  background-color: #999;
}
.li2:hover .nav3 {
  display: block;
  background-color: #bbb;
}
/*下面對寬度進行調整*/
.huoying .li2 > a {
  width: 140px;
}
.huoying .nav3 {
  left: 139px;
}
.huoying .li3 > a {
  width: 120px;
}
.sishen .li3 > a {
  width: 120px;
}
.yinhun .li3 > a {
  width: 120px;
}
.yaowei .li3 > a {
  width: 80px;
}
/*總結：
1.中心思想是ul-li-a
2.絕對定位
3.顏色漸進
4.display:none時候隱藏元素;
5.li:hover時，只要以其為容器的元素被選中，它就改變;
*/
</style>
</head>
<body>
<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="">“草帽”    蒙奇·D·路飛</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>
          <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="">現任王下七武海</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="">四皇</a>
        <ul class="nav3">
          <li class="li3"><a href="">“白鬍子”愛德華·紐蓋特（已故）</a></li>
          <li class="li3"><a href="">“紅髮”香克斯</a></li>
          <li class="li3"><a href="">“BIG·MAM”夏洛特·玲玲</a></li>
          <li class="li3"><a href="">“百獸”凱多</a></li>
          <li class="li3"><a href="">“黑鬍子”馬歇爾·D·蒂奇</a></li>
        </ul>
      </li>
      <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="">革命軍</a>
        <ul class="nav3">
          <li class="li3"><a href="">蒙奇·D·龍</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>
    </ul>
  </li>
  <li class="li1 huoying" id="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>
        </ul>
      </li>
      <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>
        </ul>
      </li>
      <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="">第十班（鹿丸班）</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>
        </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>
        </ul>
      </li>
      <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>
        </ul>
      </li>
      <li class="li2">
        <a href="">瀞靈廷</a>
        <ul class="nav3">
          <li class="li3"><a href="">四楓院夕四郎</a></li>
        </ul>
      </li>
      <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="">虛</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>
          </ul>
        </li>
        <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>
  </ul>
  </li>
  <li class="li1 yinhun">
    <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>
        </ul>
      </li>
      <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>
        </ul>
      </li>
      <li class="li2">
        <a href="">桂一派攘夷派</a>
        <ul class="nav3">
          <li class="li3"><a href="">桂小太郎</a></li>
          <li class="li3"><a href="">伊麗莎白</a></li>
        </ul>
      </li>
      <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="">快援隊</a>
        <ul class="nav3">
          <li class="li3"><a href="">阪本辰馬</a></li>
          <li class="li3"><a href="">陸奧</a></li>
        </ul>
      </li>
      <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>
          <li class="li3"><a href="">長谷川泰三</a></li>
        </ul>
      </li>
  </ul>
  </li>
  <li class="li1 yaowei">
    <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="">蛇姬之鱗</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>
        </ul>
      </li>
      <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="">人魚之踵</a>
        <ul class="nav3">
          <li class="li3"><a href="">神樂</a></li>
          <li class="li3"><a href="">米莉安娜</a></li>
        </ul>
      </li>
      <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="">四頭獵犬</a>
        <ul class="nav3">
          <li class="li3"><a href="">帕卡斯</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</body>
</html>

相關文章