CSS 二級欄目隱藏 在前端開發中，經常會遇到二級欄目隱藏的情況，這樣做可以讓頁面更加簡潔美觀。本文將介紹如何使用 CSS 實現二級欄目的隱藏效果。 首先，我們需要了解兩種常用的二級欄目隱藏方式： 1. 使用 jQuery 實現二級欄目的展開和收起； 2. 使用 CSS 的偽類選擇器 `:hover` 實現二級欄目的鼠標懸停展開。 我們重點介紹第二種方式的實現方法。 HTML 代碼如下： `````` CSS 代碼如下： ``` nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { float: left; position: relative; } nav ul li a { display: block; padding: 10px; font-size: 16px; color: #333; } nav ul li ul { display: none; /* 初始狀態隱藏二級欄目 */ position: absolute; top: 100%; left: 0; padding: 0; } nav ul li ul li { float: none; } nav ul li:hover >ul { display: block; /* 鼠標懸停一級欄目時展開二級欄目 */ } ``` 解析： HTML 結構中，我們使用 `ul` 和 `li` 標簽構建導航欄，二級欄目使用了 `ul` 嵌套 `li` 實現。 CSS 樣式中，我們采用了 `float` 浮動布局、`position` 相對布局，以及偽類選擇器 `:hover` 的技術。 具體實現方法是：通過一級欄目的 `:hover` 事件來控制二級欄目的顯示和隱藏。使用 `display: none;` 將二級欄目初始化為隱藏狀態，鼠標懸停一級欄目時使用 `display: block;` 來展開二級欄目。 使用本方法實現的二級欄目隱藏，不需要使用 JavaScript 腳本，簡單易用且效果良好。 綜上所述，掌握二級欄目的隱藏技巧可以極大地提高導航欄的美觀性和用戶體驗。