在網頁設計中，菜單欄是一種常用的導航方式。為了讓用戶更加方便地使用菜單欄，可以通過CSS來實現鼠標點擊變色的效果。

首先要創建一個菜單欄，可以使用ul和li標簽來實現：

首頁
關于我們
產品展示
聯系我們

接下來，在CSS文件中為菜單欄中的每個li標簽設置樣式：

li {
display: inline-block;
padding: 10px;
background-color: #eee;
cursor: pointer;
}

設置完樣式之后，接下來就是為鼠標點擊事件添加樣式。可以使用JavaScript來實現，也可以使用CSS中的:focus偽類來實現：

li:focus {
background-color: #ccc;
}

這樣，當用戶點擊菜單欄的某個選項時，該選項就會變為灰色背景。

當菜單欄比較復雜時，可以給每個li標簽分配一個唯一的ID，然后在CSS中為每個ID設置樣式。具體實現可以參考下面的代碼：

首頁
關于我們
產品展示
聯系我們
#home:focus {
background-color: #ccc;
}
#about:focus {
background-color: #ccc;
}
#products:focus {
background-color: #ccc;
}
#contact:focus {
background-color: #ccc;
}

如此一來，用戶在點擊菜單欄選項時，就可以看到變色的效果了。