CSS菜單是網站中非常重要的組成部分之一。菜單按鈕的設計和樣式可以讓用戶更好地了解和使用網站。在一些情況下，我們需要讓菜單在用戶鼠標懸停上面時變得更加暗淡，這就需要用到一些CSS菜單變暗技巧。 首先，在CSS中使用:hover偽類可以幫助我們實現很多變暗的效果。例如，我們可以設置當鼠標懸停在菜單上方時，菜單的顏色變暗： ```css .menu-item:hover { background: #cccccc; } ``` 這樣，在用戶把鼠標移動到菜單按鈕上方時，按鈕的顏色會變為灰色。 有時候，我們需要讓按鈕既變暗又變小。這時候，我們可以使用CSS中的transform屬性來實現這個效果。代碼如下： ```css .menu-item:hover { background: #cccccc; transform: scale(0.9); } ``` 這樣，當用戶的鼠標懸停在菜單按鈕上方時，按鈕將同時變得更暗和更小。 此外，在一些情況下，我們需要讓菜單的文字變暗而不是整個菜單按鈕。這種情況下，可以在:hover偽類中使用子元素選擇器。代碼如下： ```css .menu-item:hover span { color: #666666; } ``` 這樣，當用戶的鼠標懸停在菜單按鈕上方時，菜單文字的顏色將變為淺灰色。 總的來說，CSS菜單變暗技巧可以讓我們的網站更加豐富多彩和易用。無論是簡單的顏色變化，還是文字縮小，或是文字顏色變暗，這些技巧都可以讓我們設計出更加吸引人的菜單按鈕。