純css如何實(shí)現(xiàn)二級(jí)菜單

這篇“純css如何實(shí)現(xiàn)二級(jí)菜單”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“純css如何實(shí)現(xiàn)二級(jí)菜單”文章吧。

1. HTML結(jié)構(gòu)設(shè)計(jì)

首先，我們需要在HTML中設(shè)置好導(dǎo)航欄的結(jié)構(gòu)，這對(duì)于CSS的實(shí)現(xiàn)非常重要。

一個(gè)簡單的導(dǎo)航欄的HTML結(jié)構(gòu)如下：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Services &#x25BC;</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web Development</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

這個(gè)結(jié)構(gòu)包含一個(gè)nav元素和一個(gè)ul元素。nav元素包裹著完整的導(dǎo)航欄，而ul元素包含著導(dǎo)航欄的每個(gè)單獨(dú)的鏈接，以及包含二級(jí)菜單的鏈接。

注意到第二個(gè)li元素包含一個(gè)ul元素，這個(gè)元素就是二級(jí)菜單的容器。我們將在下面的步驟中為這個(gè)容器添加樣式。

2. CSS樣式設(shè)計(jì)

接下來，我們需要為這個(gè)導(dǎo)航欄設(shè)置CSS樣式，以實(shí)現(xiàn)二級(jí)菜單。在下面的代碼中，我們將首先去掉默認(rèn)樣式，并給所有鏈接設(shè)置以下樣式：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  position: relative;
}

nav a {
  display: block;
  padding: 0.5em;
  color: #000;
  text-decoration: none;
  font-size: 1.2em;
}

nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  background-color: #fff;
}

nav ul ul li {
  float: none;
  width: 100%;
}

nav li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul ul {
  top: 0;
  left: 100%;
}

這一塊代碼包含了以下幾個(gè)部分：

• 我們首先去掉了默認(rèn)的樣式，并設(shè)置了所有鏈接的基本樣式。

• 接下來，我們?yōu)樗械?code>li元素設(shè)置position: relative;，以便相對(duì)于它的子元素定位。這意味著我們可以通過子元素來實(shí)現(xiàn)其定位。

• 每個(gè)二級(jí)菜單用一個(gè)單獨(dú)的ul元素來包含，我們?yōu)檫@些ul元素設(shè)置了一些基本的樣式，例如定位以及不可見。

• 最后，我們添加了鼠標(biāo)懸浮的效果。當(dāng)鼠標(biāo)懸浮在一個(gè)li元素上，我們會(huì)將其子元素的可見度更改為可見。當(dāng)鼠標(biāo)懸浮在二級(jí)菜單上時(shí)，我們將其自身和其子元素的可見度更改為可見。也就是說，無論何時(shí)鼠標(biāo)懸浮在導(dǎo)航欄上，所有二級(jí)菜單都會(huì)以顯示狀態(tài)呈現(xiàn)。

3. 完整代碼示例

最終，我們的完整的HTML和CSS代碼將如下所示：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Services &#x25BC;</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web Development</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  position: relative;
}

nav a {
  display: block;
  padding: 0.5em;
  color: #000;
  text-decoration: none;
  font-size: 1.2em;
}

nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  background-color: #fff;
}

nav ul ul li {
  float: none;
  width: 100%;
}

nav li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul ul {
  top: 0;
  left: 100%;
}

以上就是關(guān)于“純css如何實(shí)現(xiàn)二級(jí)菜單”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。