CSS下拉菜單是網頁設計中經常使用的一個功能，它可以讓用戶方便地選擇不同的選項，從而提高用戶的交互體驗。下面我們將介紹一下如何使用CSS創建一個簡單的下拉菜單。

HTML代碼：
<div class="menu">
<button class="menuButton">選擇一個選項</button>
<ul class="menuList">
<li><a href="#">選項1</a></li>
<li><a href="#">選項2</a></li>
<li><a href="#">選項3</a></li>
<li><a href="#">選項4</a></li>
</ul>
</div>
CSS代碼：
.menu {
position: relative;
display: inline-block;
}
.menuButton {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.menuButton:hover {
background-color: #3e8e41;
}
.menuList {
position: absolute;
top: 100%;
left: 0;
margin-top: 5px;
padding: 0;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
display: none;
}
.menuList li {
display: block;
}
.menuList li a {
color: black;
padding: 10px;
text-decoration: none;
display: block;
}
.menuList li a:hover {
background-color: #f2f2f2;
}
.menu:hover .menuList {
display: block;
}

在上面的代碼中，我們使用了