CSS 二級下拉選單

admin發表於2019-01-29
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">
.menu{
  width:750px;
  margin:50px;
}
.menu ul{
  padding:0;
  margin:0;
  list-style-type: none;
}
.menu ul li{
  float:left;
  position:relative;
}
.menu ul li a, .menu ul li a:visited{
  display:block;
  text-align:center;
  text-decoration:none;
  width:104px;
  height:30px;
  color:#000;
  border:1px solid #fff;
  border-width:1px 1px 0 0;
  background:#c9c9a7;
  line-height:30px;
  font-size:11px;
}
.menu ul li ul{
  display:none;
}
.menu ul li:hover a{
  color:#fff;
  background:#b3ab79;
}
.menu ul li:hover ul{
  display:block;
  position:absolute;
  top:31px;
  left:0;
  width:105px;
}
.menu ul li:hover ul li a{
  display:block;
  background:#faeec7;
  color:#000;
}
.menu ul li:hover ul li a:hover{
  background:#dfc184;
  color:#000;
}
</style>
</head>
<body>
<div class="menu">
  <ul>
    <li><a class="hide" href="#">前端專區</a>
      <ul>
        <li><a href="#">div css教程</a></li>
        <li><a href="#">jquery教程</a></li>
        <li><a href="#">js教程</a></li>
        <li><a href="#">正規表示式</a></li>
      </ul>
    </li>
    <li> <a class="hide" href="#">資源下載</a>
      <ul>
        <li><a href="#">特效下載</a></li>
        <li><a href="#">模板下載</a></li>
        <li><a href="#">教程下載</a></li>
      </ul>
    </li>
    <li><a class="hide" href="#">運營交流</a>
      <ul>
        <li><a href="#">搜尋優化</a></li>
        <li><a href="#">談天說地</a></li>
        <li><a href="#">seo技術</a></li>
      </ul>
    </li>
  </ul>
  <div class="clear"></div>
</div>
</body>
<ml>

上面的程式碼實現了二級下拉選單效果，下面介紹一下它的實現過程。

一.實現原理:

（1）.結構方面:

最外圍的div是用來約束和控制整個選單的，比如控制選單在整個頁面的位置。

[HTML] 純文字檢視 複製程式碼
<li>
  <a class="hide" href="#">前端專區</a>
  <ul>
    <li><a href="#">div css教程</a><>
    <li><a href="#">jquery教程</a><>
    <li><a href="#">js教程</a><>
    <li><a href="#">正規表示式</a><>
  </ul>
</li>

第一級li下的a元素是主導航選單，同時設定a為塊級元素，這樣就可以設定它的尺寸了。

第一級li下的ul元素是二級選單，在預設狀態下它是隱藏的。

（2）.滑鼠懸浮彈出下拉選單:

[CSS] 純文字檢視 複製程式碼
.menu ul li:hover a{  color:#fff;
  background:#b3ab79;
}

上面程式碼設定當滑鼠在第一層li元素上懸浮的時候，能夠設定主導航a元素的字型顏色和背景顏色。

[CSS] 純文字檢視 複製程式碼
.menu ul li:hover ul{
  display:block;
  position:absolute;
  top:31px;
  left:0;
  width:105px;
}

當滑鼠在第一層li元素上懸浮的時候，可能讓它下面的ul元素顯示，這樣就出現了二級選單。

並且它設定它為絕對定位，這裡大家要注意到，第一層li元素是設定為相對定位的，之所以這樣就是為了讓它成為二級導航ul元素的定位參考物件，top值自然就是設定二級導航和一級li元素頂部的距離。

二.相關閱讀:

（1）.相對定位參閱CSS relative 相對定位一章節。

（2）.:hover參閱CSS E:hover偽類選擇器一章節。

相關文章