本文目錄導(dǎo)讀：

1. 基礎(chǔ)的下拉菜單結(jié)構(gòu)
2. 使用CSS隱藏子元素
3. 添加鼠標事件監(jiān)聽器
4. 優(yōu)化下拉菜單樣式

如何用CSS打造出色的下拉菜單

在網(wǎng)頁設(shè)計中，下拉菜單是一種常見且實用的導(dǎo)航方式，通過CSS，我們可以輕松地創(chuàng)建出外觀精美、功能完善的下拉菜單。

基礎(chǔ)的下拉菜單結(jié)構(gòu)

我們需要一個基礎(chǔ)的下拉菜單結(jié)構(gòu)，這通常包括一個父元素（如導(dǎo)航欄）和一個或多個子元素（如下拉菜單項）。

<nav>
  <ul>
    <li>菜單項1
      <ul>
        <li>子菜單項1</li>
        <li>子菜單項2</li>
      </ul>
    </li>
    <li>菜單項2</li>
  </ul>
</nav>

使用CSS隱藏子元素

我們需要使用CSS來隱藏子元素，這可以通過設(shè)置display屬性為none來實現(xiàn)：

nav ul ul {
  display: none;
}

添加鼠標事件監(jiān)聽器

為了讓下拉菜單在鼠標懸停時顯示子元素，我們需要添加鼠標事件監(jiān)聽器，這可以通過JavaScript來實現(xiàn)：

document.querySelector('nav ul li').addEventListener('mouseenter', function() {
  this.querySelector('ul').style.display = 'block';
});
document.querySelector('nav ul li').addEventListener('mouseleave', function() {
  this.querySelector('ul').style.display = 'none';
});

優(yōu)化下拉菜單樣式

我們可以使用CSS來優(yōu)化下拉菜單的樣式，我們可以設(shè)置子元素的背景顏色、邊框、字體大小等：

nav ul ul {
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  font-size: 14px;
}

通過以上步驟，我們就可以使用CSS和JavaScript來創(chuàng)建一個外觀精美、功能完善的下拉菜單了。