CSS下拉菜單風格

CSS下拉菜單是網頁設計中常用的一種交互效果，當鼠標懸停在導航欄中的菜單項上時，會彈出一個下拉菜單。下拉菜單可以幫助用戶快速訪問網站的各個部分，提高用戶體驗。

下面是一個簡單的CSS下拉菜單代碼：

/* 隱藏下拉菜單 */
ul.dropdown-menu {
display: none;
}
/* 鼠標懸停時顯示下拉菜單 */
li.dropdown:hover ul.dropdown-menu {
display: block;
}

以上代碼中，我們首先通過CSS來隱藏下拉菜單，然后使用:hover偽類選擇器來設置鼠標懸停在菜單項上時下拉菜單的顯示方式。

如果想要菜單項和下拉菜單之間有一定的間距，我們可以加入一些樣式：

/* 下拉菜單樣式 */
ul.dropdown-menu {
display: none;
position: absolute;
background-color: #fff;
padding: 10px;
border: 1px solid #ccc;
top: 40px;
}
li.dropdown:hover ul.dropdown-menu {
display: block;
}

我們在下拉菜單上設置了背景顏色、內邊距和邊框，同時使用position屬性將下拉菜單定位在菜單項下方，top屬性控制菜單的垂直位置。

除了上述基本樣式，還可以根據需求加入其它CSS效果，如下拉菜單項的hover背景顏色、菜單項和下拉菜單的寬度、下拉菜單的陰影等等。

總的來說，CSS下拉菜單是一種簡單實用的交互效果，可以很好地提升網站的用戶體驗。