在現代網站設計中，菜單是一個至關重要的元素。在前端開發中，我們常常使用 CSS 來創建響應式菜單，這是一種常見的技術，也被稱作「CSS 菜單切換」。在這篇文章中，我們將探討如何使用 CSS 來實現菜單切換的功能。 首先，讓我們創建一個簡單的 HTML 文件來實現菜單：

<nav>
<ul class="menu">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</nav>

在上述代碼中，我們創建了一個 nav 元素，其中包含了一個 menu 類。在 menu 中，我們創建了最常見的四個菜單項。 接下來，我們將使用 CSS 來創建菜單切換效果。使用下面的代碼塊可以為您的菜單創建切換效果：

.menu li {
display: inline-block;margin-right: 15px;}
.menu a {
color: #000;
text-decoration: none;
}
.menu .active a {
color: #fff;
background-color: #000;
padding: 10px;
}
.menu a:hover {
color: #fff;
background-color: #000;
padding: 10px;
}

在上述代碼中，我們首先將菜單項變為橫向排列。接下來，我們設置了菜單項之間的間距，并為鏈接設置了顏色和文本裝飾。然后，我們定義了一個帶有 active 類的當前菜單項。為了增加可視效果，當前菜單項背景色為黑色，文本顏色為白色，并設置了填充。 最后，我們還定義了菜單鏈接的懸停效果。在鼠標懸停在菜單項上時，菜單項將變成黑色，文本顏色和填充也將隨之變化。 通過這些代碼，我們成功地為我們的菜單添加了切換功能，現在您可以使用 CSS 輕松地創建響應式菜單。