HTML5點擊下拉菜單代碼 使用HTML5可以非常簡單的實現下拉菜單效果，下面是一份美觀、易用的示例代碼： 顯示HTML5下拉菜單的HTML代碼：

請從下拉菜單中選擇你喜歡的零食：

<div class="dropdown">
<button class="dropbtn">選擇零食 <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<a href="#">巧克力 <i class="fa fa-heart-o"></i></a>
<a href="#">薯片 <i class="fa fa-star-o"></i></a>
<a href="#">果汁 <i class="fa fa-smile-o"></i></a>
</div>
</div>

最重要的代碼是類名為"dropdown"的div，其中包含兩個子元素：內容按鈕（button）和菜單內容（dropdown-content）。內容按鈕使用“dropbtn”類設置樣式，而菜單內容使用“dropdown-content”類。 CSS樣式代碼：

/* 添加FontAwesome字體圖標庫 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
/* 設置整個下拉菜單的樣式 */
.dropdown {
position: relative;
display: inline-block;
}
/* 按鈕的樣式 */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
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-content a:hover {
background-color: #f1f1f1;
}
/* 顯示菜單內容 */
.show {
display: block;
}

這些樣式設置了整個下拉菜單的外觀：內容按鈕的背景顏色、提示文本的字體大小等等。要注意的是，在這個樣式代碼中，導入了一個第三方字體圖標庫“FontAwesome”，這個庫提供了很多圖標，可以通過類名調用，比如這里使用了“fa fa-caret-down”類通過“i”標簽來實現下拉箭頭的效果。 使用JavaScript代碼：

/* 當用戶點擊按鈕時顯示或隱藏菜單 */
document.querySelector(".dropbtn").addEventListener("click", function() {
document.querySelector(".dropdown-content").classList.toggle("show");
});
/* 當用戶鼠標離開下拉菜單時自動隱藏 */
document.querySelector(".dropdown").addEventListener("mouseleave", function() {
document.querySelector(".dropdown-content").classList.remove("show");
});

通過JavaScript代碼，我們可以給內容按鈕的點擊事件添加函數，當按鈕被點擊時，菜單內容會根據當前的狀態進行聯動。同時，我們為下拉菜單添加了一個自動隱藏的功能：當用戶鼠標離開下拉菜單時，菜單會自動隱藏。 最后，實現效果如下所示： 請從下拉菜單中選擇你喜歡的零食： 選擇零食 v 巧克力 薯片 果汁 通過簡單的HTML5、CSS和JavaScript代碼，我們可以輕松實現下拉菜單的效果，讓用戶更加方便的瀏覽和選擇網站內容。