CSS基礎(chǔ)：如何制作下拉菜單

下拉菜單是網(wǎng)頁設(shè)計(jì)中常見的一個(gè)功能，它可以讓用戶在一個(gè)列表中選擇一個(gè)選項(xiàng)，在CSS中，我們可以使用樣式和JavaScript來制作下拉菜單。

我們需要?jiǎng)?chuàng)建一個(gè)HTML列表，可以使用無序列表（ul）或有序列表（ol），我們可以使用CSS來設(shè)置列表的樣式，例如顏色、字體大小等，我們可以使用JavaScript來添加交互功能，例如當(dāng)用戶點(diǎn)擊列表項(xiàng)時(shí)，顯示或隱藏子菜單。

以下是一個(gè)簡(jiǎn)單的CSS基礎(chǔ)下拉菜單示例：

HTML代碼：

<ul id="myMenu">
  <li>菜單項(xiàng)1
    <ul>
      <li>子菜單項(xiàng)1</li>
      <li>子菜單項(xiàng)2</li>
    </ul>
  </li>
  <li>菜單項(xiàng)2</li>
  <li>菜單項(xiàng)3</li>
</ul>

CSS代碼：

#myMenu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#myMenu li {
  margin: 0;
  padding: 0;
}
#myMenu ul {
  display: none;
}

JavaScript代碼：

document.getElementById('myMenu').addEventListener('click', function(event) {
  var submenu = event.target.querySelector('ul');
  if (submenu) {
    submenu.style.display = submenu.style.display === 'none' ? 'block' : 'none';
  }
});

在這個(gè)示例中，我們創(chuàng)建了一個(gè)包含三個(gè)菜單項(xiàng)的下拉菜單，每個(gè)菜單項(xiàng)都有一個(gè)子菜單，我們使用CSS來設(shè)置菜單的樣式，并使用JavaScript來添加點(diǎn)擊事件，當(dāng)用戶點(diǎn)擊菜單項(xiàng)時(shí)，顯示或隱藏子菜單。