在網站的頁面設計中，菜單欄是一個重要的組成部分，它不僅提供導航功能，還可以通過樣式來美化頁面。其中，選中狀態的菜單欄樣式尤為重要，下面我們來學習如何使用CSS為菜單欄添加選中狀態的樣式。

/* 定義菜單欄的樣式 */
 .menu{
background-color: #EEE;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
list-style: none;
 }
/* 定義菜單欄選中狀態的樣式 */
 .menu li.selected{
background-color: #F00;
color: #FFF;
 }

上面的代碼中，我們首先定義了菜單欄的樣式，利用flex布局使得菜單欄水平居中并垂直居中。接著，我們定義了選中狀態的菜單欄樣式，通過類名.selected來確定選中狀態，設置背景色和字體顏色。通過這樣的設置，我們可以在頁面上清晰地看到當前所在的位置，提高用戶體驗。

使用CSS為菜單欄添加選中狀態的樣式非常簡單，只需要設置相應的樣式即可。而在實際開發中，還可以通過JavaScript來動態修改菜單欄的選中狀態，實現更加靈活的效果。