CSS網(wǎng)頁(yè)二級(jí)菜單的制作方法

在CSS中制作二級(jí)菜單，我們需要使用HTML和CSS的結(jié)合，我們需要?jiǎng)?chuàng)建一個(gè)HTML結(jié)構(gòu)來(lái)放置我們的菜單項(xiàng)和子菜單項(xiàng)，我們將使用CSS來(lái)樣式化這個(gè)結(jié)構(gòu)，使其看起來(lái)像一個(gè)二級(jí)菜單。

以下是一個(gè)簡(jiǎn)單的HTML和CSS示例，展示了一個(gè)基本的二級(jí)菜單結(jié)構(gòu)：

HTML:

<ul class="menu">
  <li>菜單項(xiàng)1
    <ul class="sub-menu">
      <li>子菜單項(xiàng)1</li>
      <li>子菜單項(xiàng)2</li>
    </ul>
  </li>
  <li>菜單項(xiàng)2
    <ul class="sub-menu">
      <li>子菜單項(xiàng)3</li>
      <li>子菜單項(xiàng)4</li>
    </ul>
  </li>
</ul>

CSS:

.menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.menu > li {
  position: relative;
  display: inline-block;
}
.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}
.sub-menu > li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.menu > li:hover .sub-menu {
  display: block;
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)包含兩個(gè)菜單項(xiàng)和每個(gè)菜單項(xiàng)下的兩個(gè)子菜單項(xiàng)的菜單結(jié)構(gòu)，我們使用CSS來(lái)樣式化這個(gè)結(jié)構(gòu)，使其看起來(lái)像一個(gè)二級(jí)菜單。.sub-menu類用于樣式化子菜單項(xiàng)，而.menu > li:hover .sub-menu選擇器用于在鼠標(biāo)懸停在菜單項(xiàng)上時(shí)顯示子菜單。