HTML中有很多實用的功能，其中一項就是可以通過點擊實現下拉菜單的顯示，非常方便。下面就來看一下具體的代碼實現。
<!DOCTYPE html>
<html>
<head>
<title>HTML下拉菜單實現</title>
<script>
function displayMenu() {
var x = document.getElementById("menu");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<style>
#menu {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
</style>
</head>
<body>
<h1>HTML下拉菜單實現</h1>
<button onclick="displayMenu()">下拉菜單</button>
<div id="menu">
<a href="#">菜單項1</a>
<a href="#">菜單項2</a>
<a href="#">菜單項3</a>
</div>
</body>
</html>上述代碼中，首先需要定義一個按鈕，綁定一個點擊事件。當用戶點擊按鈕時，會執行displayMenu()函數。
displayMenu()函數中，首先通過getElementById()方法獲取到要展示的下拉菜單，然后根據其當前的display屬性進行判斷，實現顯示或隱藏。
最后，在css樣式中設置了下拉菜單的位置、顏色、大小等屬性。
這是一種簡單實用的下拉菜單實現方法，可以根據實際需求進行定制，讓網頁變得更加美觀實用。
上一篇css 兩列 側欄