純CSS實現的二級下拉導覽功能表執行個體代碼，css導覽功能表

最後更新：2016-01-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

純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/

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More