在網頁設計中，為了讓用戶更方便地瀏覽網頁內容，我們常常會使用導航菜單來為網頁設置路標。常常導航菜單會分為一級和二級菜單，而在設計時我們也常常需要一些優(yōu)化讓菜單看起來更簡潔美觀。 我們可以通過CSS來實現(xiàn)二級菜單的隱藏效果，讓菜單收起來不占用太多的頁面空間，同時又可以通過鼠標懸浮在一級菜單上時展示其二級菜單的方式，來完整地展示所有的菜單選項。接下來讓我們看一下具體的實現(xiàn)過程。 首先我們需要在HTML中設置一級菜單和二級菜單的縮進，便于CSS樣式的設置。通常我們會在一級菜單下方放置二級菜單，代碼如下：

<ul class="navbar">
<li>菜單一
<ul class="subnav">
<li>子菜單一</li>
<li>子菜單二</li>
</ul>
</li>
<li>菜單二</li>
<li>菜單三</li>
<li>菜單四
<ul class="subnav">
<li>子菜單三</li>
<li>子菜單四</li>
</ul>
</li>
</ul>

接下來我們在CSS中定義一級菜單和二級菜單的樣式。我們首先設定二級菜單的樣式為隱藏（display:none），代碼如下：

ul.subnav {
display:none;
}

定義完二級菜單后，接下來我們需要定義鼠標懸浮在一級菜單上時對應的二級菜單的樣式。我們通過:hover偽類來實現(xiàn)該效果，代碼如下：

ul.navbar li:hover>ul.subnav {
display:block;
}

這樣一來，當鼠標懸浮在一級菜單上時，其對應的二級菜單就可以顯示出來了。 以上就是關于二級菜單隱藏css的相關內容，希望能對您在網頁設計中對導航菜單的優(yōu)化起到一定的幫助。