CSS是前端開發中一項非常重要的技能，而其中一個常見的需求就是下拉菜單的制作。下面就讓我們來看一下如何使用CSS實現下拉菜單。
/*下拉菜單外層容器的樣式*/
.dropdown{
position: relative;
display: inline-block;
}
/*下拉菜單按鈕的樣式*/
.dropdown-btn{
background-color: #fff;
color: #333;
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}
/*下拉菜單的樣式*/
.dropdown-content{
position: absolute;
top: 100%; /*下拉菜單位置*/
z-index: 1; /*菜單在上*/
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: none; /*默認隱藏*/
}
/*當鼠標移動到按鈕上時，下拉菜單顯示*/
.dropdown:hover .dropdown-content{
display: block;
}
/*下拉菜單中某一項的樣式*/
.dropdown-item{
color: #333;
padding: 10px 15px;
text-decoration: none;
display: block;
}
/*下拉菜單中某一項被選中的樣式*/
.dropdown-item:hover{
background-color: #f1f1f1;
}以上是CSS代碼部分，下面我們來看一下HTML代碼。在HTML中需要注意將下拉菜單按鈕和菜單項放在同一個父元素容器中。
在這里我們使用了一個容器元素和兩個子元素，容器元素使用了“relative”定位，而下拉菜單使用了“absolute”定位。我們將鼠標懸停事件與菜單的顯示綁定在了一起。使用CSS實現下拉菜單是一項非常實用的技能，適用于各種類型的網站。