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

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

CSS浮動(dòng)下拉菜單的實(shí)現(xiàn)方法

CSS浮動(dòng)下拉菜單是一種常用的網(wǎng)頁導(dǎo)航方式，它能夠以簡潔明了的方式展示網(wǎng)站的主要內(nèi)容和功能，同時(shí)提高用戶體驗(yàn)，下面介紹如何實(shí)現(xiàn)CSS浮動(dòng)下拉菜單。

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

我們需要一個(gè)包含下拉菜單的HTML結(jié)構(gòu)，這個(gè)結(jié)構(gòu)通常包括一個(gè)包含下拉菜單的容器和一個(gè)或多個(gè)下拉菜單項(xiàng)。

<div class="dropdown-container">
  <a href="#" class="dropdown-trigger">下拉菜單</a>
  <ul class="dropdown-menu">
    <li><a href="#">選項(xiàng)1</a></li>
    <li><a href="#">選項(xiàng)2</a></li>
    <li><a href="#">選項(xiàng)3</a></li>
  </ul>
</div>

CSS樣式

我們需要使用CSS來定義下拉菜單的樣式，我們需要設(shè)置容器的寬度和高度，以及菜單項(xiàng)的樣式。

.dropdown-container {
  width: 200px;
  height: 50px;
  position: relative; /* 相對于其正常位置定位 */
}
.dropdown-trigger {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 50px;
  color: #333;
  text-decoration: none;
}
.dropdown-menu {
  position: absolute; /* ***定位 */
  top: 100%; /* 相對于容器定位 */
  left: 0;
  width: 100%; /* 寬度為容器寬度 */
  height: auto; /* 高度自適應(yīng) */
  list-style: none; /* 去除列表樣式 */
}