下拉菜單是網頁設計中經常用到的交互元素，使用CSS可以制作出漂亮的下拉菜單，下面介紹一下如何制作。

// HTML結構
<div class="dropdown">
<a class="dropdown-toggle" href="#">下拉菜單</a>
<ul class="dropdown-menu">
<li><a href="#">選項1</a></li>
<li><a href="#">選項2</a></li>
<li><a href="#">選項3</a></li>
</ul>
</div>
// CSS樣式
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-toggle {
display: block;
padding: 10px;
background-color: #fff;
color: #333;
border: 1px solid #ccc;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
display: none;
z-index: 999;
padding: 0;
margin: 0;
list-style: none;
background-color: #fff;
border: 1px solid #ccc;
}
.dropdown-menu li {
display: block;
}
.dropdown-menu li a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
.dropdown:hover .dropdown-menu {
display: block;
}

通過設置下拉菜單的位置以及鼠標懸停時顯示下拉菜單，我們可以制作出一個漂亮的下拉菜單。根據需要可以增加一些樣式，比如鼠標懸停時的背景色。