HTML 上拉菜單是網站常見的交互組件，可以讓用戶更快捷方便地瀏覽和選擇相關內容。本文將介紹如何使用 HTML 和 CSS 建立一個簡單的上拉菜單。 首先，我們需要一個包含菜單選項的 HTML 結構。以下是一個示例：

<div class="dropdown">
<button class="dropbtn">下拉菜單</button>
<div class="dropdown-content">
<a href="#home">首頁</a>
<a href="#about">關于我們</a>
<a href="#contact">聯系我們</a>
</div>
</div>

在這個示例中，我們使用了一個 div 元素來容納整個菜單。里面包含了一個按鈕元素和一個下拉菜單內容的 div 元素。 接下來，我們需要使用 CSS 樣式來控制菜單的外觀和行為。

.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #4CAF50;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}

在這個 CSS 樣式中，我們使用了 position 屬性來讓菜單相對定位于容器元素，使得下拉內容會受到容器元素邊界的約束。我們還使用了 display:none 屬性來隱藏下拉內容，并在:hover 偽類中將其切換為 display:block，以實現當鼠標懸浮在容器元素上時顯示下拉菜單的效果。 最終的效果如下：