css滑鼠懸浮二級下拉導航選單

antzone發表於2017-04-06
CSS

本章節分享一段程式碼例項，它實現了滑鼠懸浮出現二級下拉導航選單的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #ccc;
}
#nav {
  background-color: #0593d3;
  width: 698px;
  height: 40px;
  margin: 100px auto;
  border: 1px solid #fff;
}
ul {
  list-style: none;
}
ul li {
  position: relative;
  float: left;
  line-height: 40px;
  text-align: center;
  border-left: 1px solid #fff;
}
a {
  text-decoration: none;
  display: block;
  color: #fff;
  padding: 0 15px;
  height: 40px;
}
a:hover {
  color: #000;
  background-color: #77b6f9;
}
ul li ul {
  position: absolute;
  left: 0;
  top: 40px;
  display: none;
}
ul li ul li {
  float: none;
  background-color: #0593d3;
  margin-top: 2px;
}
ul li ul li a {
  width: 120px;
}
ul li:hover ul {
  display: block;
}
</style>
</head>
<body>
  <div id="nav">
    <ul>
      <li><a href="#">螞蟻部落</a></li>
      <li>
        <a href="#">前端專區</a>
        <ul>
          <li><a href="#">css教程</a></li>
          <li><a href="#">div教程</a></li>
        </ul>
      </li>
      <li>
        <a href="#">資源下載</a>
        <ul>
          <li><a href="#">特效下載</a></li>
          <li><a href="#">圖片下載</a></li>
        </ul>
      </li>
      <li><a href="#">js教程</a></li>
      <li><a href="#">json教程</a></li>
      <li><a href="#">正規表示式教程</a></li>
    </ul>
  </div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
* {
  margin: 0;
  padding: 0;
}

上面的程式碼實現了簡單的css重置功能，將外邊距和內邊距全部設定為0。

更全面的可以參閱css預重置樣式程式碼一章節。

[CSS] 純文字檢視 複製程式碼
body {
  background-color: #ccc;
}

設定頁面背景顏色。

[CSS] 純文字檢視 複製程式碼
#nav {
  background-color: #0593d3;
  width: 698px;
  height: 40px;
  margin: 100px auto;
  border: 1px solid #fff;
}

上面的程式碼是設定導航欄容器的樣式。

比如背景顏色，寬度高度，還有水平居中等。

border: 1px solid #fff這個實現白色邊框效果。

[CSS] 純文字檢視 複製程式碼
ul {
  list-style: none;
}

去掉列表自帶的樣式。

[CSS] 純文字檢視 複製程式碼
ul li {
  position: relative;
  float: left;
  line-height: 40px;
  text-align: center;
  border-left: 1px solid #fff;
}

上面的程式碼設定li為相對定位

並且左浮動，這就實現了主導航的水平排列。

line-height: 40px能夠設定文字垂直居中，這個和#nav的height屬性是對應的。

[CSS] 純文字檢視 複製程式碼
a {
  text-decoration: none;
  display: block;
  color: #fff;
  padding: 0 15px;
  height: 40px;
}

上面的程式碼可以將連結a底部的瞎話先去掉。

並且設定其為塊級元素，這樣就可以設定它的尺寸。

[CSS] 純文字檢視 複製程式碼
a:hover {
  color: #000;
  background-color: #77b6f9;
}

上面的程式碼設定滑鼠懸浮於連結上的樣式。

[CSS] 純文字檢視 複製程式碼
ul li ul {
  position: absolute;
  left: 0;
  top: 40px;
  display: none;
}

設定li元素的ul元素的樣式，也就是二級導航選單的樣式。

[CSS] 純文字檢視 複製程式碼
ul li ul li {
  float: none;
  background-color: #0593d3;
  margin-top: 2px;
}

float: none方式繼承之前的float:left的設定。

相關文章