純CSS二級下拉導航選單實

螞蟻小編發表於2017-04-16
CSS

二級下拉選單在眾多的網站都有應用，能有效的組織分類，且能節省大量空間。

當前很多二級導航選單是結合JavaScript實現，本章節介紹一下使用純css實現的下拉選單。

程式碼如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!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.核心結構:

[HTML] 純文字檢視 複製程式碼
<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屬性值，以此實現下拉選單效果。

相關文章