在CSS中，我們可以通過修改菜單按鈕的樣式來實現選中后變色的效果。以下是實現此功能的方法： 首先，在HTML中，我們需要為每個菜單按鈕分配一個ID或類名，以便CSS可以正確地選擇它們。例如：

<ul>
<li id="menu1"><a href="#">菜單1</a></li>
<li id="menu2"><a href="#">菜單2</a></li>
<li id="menu3"><a href="#">菜單3</a></li>
</ul>

接下來，在CSS中，我們可以使用:hover偽類來設置鼠標懸停時的按鈕樣式。例如：

#menu1:hover, #menu1:focus {
background-color: #ff0000;
color: #ffffff;
}
#menu2:hover, #menu2:focus {
background-color: #00ff00;
color: #ffffff;
}
#menu3:hover, #menu3:focus {
background-color: #0000ff;
color: #ffffff;
}

上面的代碼中，我們使用:hover和:focus偽類來設置當用戶將鼠標懸停在菜單按鈕上或通過鍵盤導航選擇菜單按鈕時所應用的樣式。我們還使用background-color屬性和color屬性來設置按鈕的背景顏色和文本顏色。 最后，我們可以通過使用JavaScript來切換菜單按鈕的class屬性，以便在用戶單擊按鈕時將其選中。例如：

<script>
var buttons = document.querySelectorAll('ul li');
buttons.forEach(function(button) {
button.addEventListener('click', function() {
buttons.forEach(function(btn) {
btn.classList.remove('selected');
});
button.classList.add('selected');
});
});
</script>

上面的代碼中，我們選擇了所有菜單按鈕，并為每個按鈕添加了單擊事件。當用戶單擊某個按鈕時，我們首先將所有按鈕的class屬性移除，并將當前按鈕的class屬性設置為“selected”。 綜上所述，使用CSS和JavaScript可以輕松地實現菜單按鈕選中變色的效果。