隨著互聯網的發展，網站越來越重要。在開發網站時，我們需要考慮用戶體驗，其中一個很重要的方面就是菜單。好的菜單可以讓訪問我們網站的用戶更輕松地找到他們需要的信息。并且，如果用戶在我們網站的菜單上花費太多的時間，那么他們可能會在競爭對手的網站上找到更好的體驗。

為了實現這樣的目標，我們可以使用CSS來改變菜單的樣式。CSS使我們能夠輕松地在樣式之間切換，讓我們為用戶提供最佳體驗。下面是一個使用CSS切換菜單樣式的基本代碼：

<!-- HTML 代碼 -->
<ul id="menu">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">服務</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
<!-- CSS 代碼 -->
#menu li {
display: inline-block;
margin-right: 20px;
padding: 10px;
background-color: #eee;
}
#menu li.active {
background-color: #333;
color: #fff;
}
#menu li a {
color: #333;
}
#menu li.active a {
color: #fff;
}

上面的代碼中，我們使用了一些基本的CSS樣式。我們也創建了一個id為“menu”的清單，并在列表項上添加了一些樣式。其中，active類是用來突出當前頁面的。當用戶點擊一個菜單項時，我們可以使用JavaScript來切換CSS類，從而改變其樣式。

這是一個用jQuery實現的例子代碼：

// jQuery 代碼
$('#menu li a').on('click', function() {
// 刪除active類
$('#menu li').removeClass('active');
// 添加active類到當前的菜單項
$(this).parent().addClass('active');
// 阻止默認行為
return false;
});

上面的代碼使用jQuery來監聽菜單項上的點擊事件。當一個菜單項被點擊時，它的active類被刪除，并且添加到新的菜單項上。最后，防止瀏覽器默認行為，從而避免鏈接跳轉。

這里提供了使用CSS切換菜單樣式的基本代碼和使用jQuery來實現它的例子。我們可以根據自己的需求對它進行修改和擴展。