在設計網頁時，下拉菜單是常見的功能。為了讓用戶更好地了解當前下拉菜單狀態，通常會使用CSS來添加一個下拉箭頭。下拉箭頭的設計很簡單，但在實現中，我們可能會遇到一個問題：下拉箭頭抖動。

.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-arrow {
width: 0; 
height: 0; 
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
}

以上是一個簡單的CSS下拉菜單的代碼。但是，當你鼠標滑過下拉箭頭時，它會抖動。這是因為下拉箭頭的定位使用了絕對定位，當顯示下拉菜單時，下拉箭頭會從頂部向下移動，導致抖動。

要解決這個問題，我們可以將下拉箭頭的定位改為相對定位，并讓它與下拉菜單一起滑動。以下是修改后的代碼：

.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-arrow {
width: 0; 
height: 0; 
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
position: relative;
top: -5px;
right: 15px;
}
.dropdown:hover .dropdown-arrow {
top: -6px;
}

在修改后的代碼中，我們將下拉箭頭的定位改為相對定位，然后將其向上移動5像素。當鼠標滑過下拉箭頭時，我們將其繼續向上移動1像素。這樣，我們就可以避免下拉箭頭抖動的問題。