CSS 是網頁設計中的必備工具，本文將介紹如何使用 CSS 來實現顯示/隱藏菜單欄。

首先，讓我們來看一下 HTML 代碼：

<div id="nav">
<ul>
<li>首頁</li>
<li>關于我們</li>
<li>服務項目</li>
<li>聯系我們</li>
</ul>
</div>

我們需要的是將 上面這段 HTML 代碼 轉化為可以被顯示/隱藏的菜單欄，通過 CSS，我們可以使用以下代碼來實現：

#nav {
display: none;  /* 默認隱藏 */
}
/* 點擊按鈕時顯示菜單欄 */
input[type="checkbox"]:checked ~ #nav {
display: block;
}

其中，我們使用了 CSS 中的display屬性將菜單欄默認隱藏。接著，我們利用input標簽的checked狀態，通過“兄弟選擇器”來顯示菜單欄。

通過在 HTML 中添加以下代碼，我們可以實現一個顯示/隱藏菜單欄的按鈕：

<input type="checkbox" id="toggle">
<label for="toggle">≡</label>

完整的 HTML 代碼如下：

<input type="checkbox" id="toggle">
<label for="toggle">≡</label>
<div id="nav">
<ul>
<li>首頁</li>
<li>關于我們</li>
<li>服務項目</li>
<li>聯系我們</li>
</ul>
</div>
<style>
#nav {
display: none;
}
input[type="checkbox"]:checked ~ #nav {
display: block;
}
</style>

通過以上代碼，我們便成功地實現了一個能夠顯示/隱藏的菜單欄，只需要添加一些樣式和內容，你就可以創建符合自己需求的菜單欄了。