下拉菜單導(dǎo)航是Web開(kāi)發(fā)中常見(jiàn)的一項(xiàng)功能，它可以讓用戶(hù)在主菜單中選擇子菜單或選項(xiàng)，在CSS中，我們可以使用div元素來(lái)創(chuàng)建下拉菜單導(dǎo)航，并通過(guò)CSS樣式來(lái)美化它。

我們需要?jiǎng)?chuàng)建一個(gè)HTML結(jié)構(gòu)來(lái)表示下拉菜單導(dǎo)航，我們使用一個(gè)div元素來(lái)包裹整個(gè)導(dǎo)航菜單，然后為每個(gè)子菜單或選項(xiàng)創(chuàng)建一個(gè)div元素。

<div class="dropdown-menu">
  <div class="menu-item">Home</div>
  <div class="menu-item">About Us</div>
  <div class="menu-item">Services
    <div class="sub-menu-item">Service 1</div>
    <div class="sub-menu-item">Service 2</div>
    <div class="sub-menu-item">Service 3</div>
  </div>
  <div class="menu-item">Contact Us</div>
</div>

我們可以使用CSS來(lái)美化這個(gè)下拉菜單導(dǎo)航，我們可以設(shè)置菜單項(xiàng)和子菜單項(xiàng)的樣式，以及當(dāng)鼠標(biāo)懸停在菜單項(xiàng)上時(shí)改變樣式。

.dropdown-menu {
  position: relative;
  display: inline-block;
}
.menu-item {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 5px;
  cursor: pointer;
}
.sub-menu-item {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 5px;
  cursor: pointer;
}
.menu-item:hover {
  background-color: #f8f9fa;
}

在這個(gè)CSS樣式中，我們?cè)O(shè)置了菜單項(xiàng)和子菜單項(xiàng)的樣式，并添加了鼠標(biāo)懸停時(shí)的樣式變化，這樣，當(dāng)用戶(hù)將鼠標(biāo)懸停在菜單項(xiàng)上時(shí)，背景顏色會(huì)發(fā)生變化，從而指示用戶(hù)該菜單項(xiàng)是可點(diǎn)擊的。