下拉菜單是Web開(kāi)發(fā)中常見(jiàn)的一個(gè)功能，它可以讓用戶在多個(gè)選項(xiàng)中選擇一個(gè)，使用div和CSS可以輕松地實(shí)現(xiàn)下拉菜單的功能。

我們需要?jiǎng)?chuàng)建一個(gè)div元素來(lái)作為下拉菜單的容器，這個(gè)div元素應(yīng)該包含多個(gè)子元素，每個(gè)子元素代表一個(gè)菜單項(xiàng)。

<div id="dropdown-menu">
  <div class="menu-item">菜單項(xiàng)1</div>
  <div class="menu-item">菜單項(xiàng)2</div>
  <div class="menu-item">菜單項(xiàng)3</div>
</div>

我們可以使用CSS來(lái)設(shè)置下拉菜單的樣式和行為，我們可以將下拉菜單的容器設(shè)置為相對(duì)定位，以便我們可以將子元素放置在容器的下方。

#dropdown-menu {
  position: relative;
}

我們可以將每個(gè)菜單項(xiàng)設(shè)置為塊級(jí)元素，并設(shè)置它們的寬度和高度。

.menu-item {
  display: block;
  width: 100px;
  height: 30px;
}

我們可以使用CSS的偽類來(lái)設(shè)置下拉菜單的交互效果，我們可以將鼠標(biāo)懸停在菜單項(xiàng)上時(shí)改變其背景顏色。

.menu-item:hover {
  background-color: #f0f0f0;
}

通過(guò)以上CSS樣式的設(shè)置，我們可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的下拉菜單功能，用戶可以將鼠標(biāo)懸停在菜單項(xiàng)上，并選擇其中一個(gè)選項(xiàng)。