CSS三級下拉導航選單詳解

admin發表於2018-09-09
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">
.multi_drop_menu {
  font: 1em helvetica, arial, sans-serif;
}
.multi_drop_menu a {
  display: block;
  color: #555;
  background-color: #eee;
  padding: .2em 1em;
  border-width: 3px;
  border-color: transparent;
}
.multi_drop_menu a:hover {
  color: #fff;
  background-color: #aaa;
}
.multi_drop_menu a:active {
  background: #fff;
  color: #ccc;
}
.multi_drop_menu * {
  margin: 0;
  padding: 0;
}
.multi_drop_menu ul {
  float: left;
}
.multi_drop_menu li {
  float: left;
  list-style-type: none;
  position: relative;
}
.multi_drop_menu li a {
  display: block;
  border-right-style: solid;
  background-clip: padding-box;
  text-decoration: none;
}
.multi_drop_menu li:last-child a {
  border-right-style: none;
}
.multi_drop_menu li ul {
  width: 9em;
}
.multi_drop_menu li li a {
  border-right-style: none;
  border-top-style: solid;
}
.multi_drop_menu li ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
}
.multi_drop_menu li li {
  float: none;
}
.multi_drop_menu li li ul {
  display: none;
}
.multi_drop_menu li:hover > ul {
  display: block;
}
.multi_drop_menu li li ul {
  position: absolute;
  left: 102%;
  top: 0;
}
</style>
</head>
<body>
<nav class="multi_drop_menu">
  <ul>
    <li><a href="#">螞蟻部落一</a></li>
    <li><a href="#">螞蟻部落二</a></li>
    <li><a href="#">螞蟻部落三</a></li>
    <li>
      <a href="#">螞蟻部落四</a>
      <ul>
        <li><a href="#">div教程</a></li>
        <li><a href="#">css教程</a></li>
        <li>
          <a href="#">js教程</a>
          <ul>
            <li><a href="#">softwhy.com</a></li>
            <li><a href="#">antzone</a></li>
            <li><a href="#">青島市南區</a></li>
            <li><a href="#">螞蟻部落</a></li>
          </ul>
        </li>
        <li><a href="#">jquery教程</a></li>
      </ul>
    </li>
  </ul>
</nav>
</body>
</html>

上面的程式碼實現了我們的要求，下面就對其進行一下分析。

一.結構分析:

[HTML] 純文字檢視 複製程式碼
<nav class="multi_drop_menu"></nav>

這是整個選單的容器。

[HTML] 純文字檢視 複製程式碼
<ul>
    <li><a href="#">螞蟻部落一</a></li>
    <li><a href="#">螞蟻部落二</a></li>
    <li><a href="#">螞蟻部落三</a></li>

ul下的第一級li是一級導航選單。

[HTML] 純文字檢視 複製程式碼
<li>
  <a href="#">螞蟻部落四</a>
  <ul>
    <li><a href="#">div教程</a></li>
    <li><a href="#">css教程</a></li>

li元素下面可以再巢狀ul元素，作為二級下拉選單的容器。

以此類推就可以實現三級下拉選單，四級下拉選單等等。

css程式碼分析:

[CSS] 純文字檢視 複製程式碼
.multi_drop_menu li li ul {
  display: none;
}
.multi_drop_menu li:hover > ul {
  display: block;
}

這是核心部分，預設ul子選單是隱藏的，當滑鼠懸浮的時候，li下面的第一級ul選單就會顯示。

二.相關閱讀:

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

（2）.background-clip參閱CSS3 background-clip一章節。

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

（4）.絕對定位參閱CSS position:absolute 絕對定位一章節。

相關文章