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

1. HTML結(jié)構(gòu)
2. CSS樣式
3. JavaScript交互

如何制作CSS下拉菜單

CSS下拉菜單是一種常見的用戶界面元素，通常用于展示更多的選項或功能，使用CSS制作下拉菜單可以帶來更好的用戶體驗，并且可以增加網(wǎng)站的交互性。

HTML結(jié)構(gòu)

我們需要一個HTML結(jié)構(gòu)來承載下拉菜單，可以使用一個div元素來包裹整個菜單，并使用ul和li元素來構(gòu)建菜單項。

<div class="dropdown">
  <ul>
    <li><a href="#">選項1</a></li>
    <li><a href="#">選項2</a></li>
    <li><a href="#">選項3</a></li>
  </ul>
</div>

CSS樣式

我們需要使用CSS來定義下拉菜單的樣式，以下是一個基本的樣式示例：

.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
}
.dropdown li {
  list-style-type: none;
  margin: 0;
  padding: 10px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #ccc;
}
.dropdown a {
  text-decoration: none;
  color: #000;
}

在這個樣式中，我們使用了position屬性來定位下拉菜單，并使用display屬性來控制菜單的顯示和隱藏，我們還使用了list-style-type屬性來去除列表的樣式，并使用margin和padding屬性來調(diào)整菜單項之間的間距，我們還使用了text-decoration屬性來去除鏈接的下劃線。

JavaScript交互

為了讓下拉菜單能夠響應(yīng)用戶的操作，我們還需要使用JavaScript來添加一些交互功能，我們可以使用addEventListener方法來監(jiān)聽鼠標(biāo)事件，并根據(jù)事件類型來顯示或隱藏下拉菜單，我們還可以使用阻止冒泡事件來防止事件冒泡到上層元素，以下是一個簡單的JavaScript示例：

document.querySelector('.dropdown').addEventListener('click', function(event) {
  event.stopPropagation(); // 阻止冒泡到上層元素
  if (event.target == this) { // 如果點擊的是div元素本身，則顯示或隱藏菜單
    this.querySelector('ul').style.display = this.querySelector('ul').style.display == 'block' ? 'none' : 'block'; // 顯示或隱藏菜單項
  } else if (event.target == this.querySelector('ul')) { // 如果點擊的是菜單項，則顯示或隱藏菜單項本身
    event.target.style.display = event.target.style.display == 'block' ? 'none' : 'block'; // 顯示或隱藏菜單項本身
  } else { // 如果點擊的是其他元素，則不執(zhí)行任何操作
    return false; // 不執(zhí)行任何操作，防止冒泡到上層元素
  }
});