CSS導航橫向二級菜單是一種使用 CSS 樣式來創建導航欄的方法，它允許您創建具有多個子菜單的橫向菜單。本文將介紹如何使用 CSS 樣式創建橫向二級菜單，并介紹如何使用該樣式來隱藏或顯示子菜單。

## 創建橫向二級菜單

要創建橫向二級菜單，您需要使用 HTML 和 CSS 來構建菜單欄。首先，您需要使用 HTML 元素來定義菜單的頭部部分，例如：

```html

<nav>

<ul>

<li><a href="#">主菜單</a></li>

<li><a href="#">子菜單1</a></li>

<li><a href="#">子菜單2</a></li>

<li><a href="#">子菜單3</a></li>

</ul>

</nav>

在這個例子中，`<nav>` 元素是菜單的頭部部分，`<ul>` 元素是菜單的子列表。您可以通過添加更多的子列表來創建更多的子菜單。

接下來，您需要使用 CSS 樣式來定義菜單欄的樣式，包括顏色、字體、大小等。例如：

```css

nav {

background-color: #f0f0f0;

font-size: 16px;

padding: 20px;

list-style-type: none;

margin: 0;

padding: 0;

display: inline-block;

width: 100%;

text-align: center;

margin-right: 20px;

color: #4CAF50;

text-decoration: none;

在這個例子中，`nav` 元素使用背景顏色來顯示菜單欄，`ul` 元素使用 `list-style-type: none` 來避免列表邊框，`li` 元素使用 `display: inline-block` 來將其轉換為行內塊元素，并使用 `margin-right: 20px` 來設置子菜單的右側邊距。

最后，您需要將 CSS 樣式應用到 HTML 元素中，以便瀏覽器能夠正確渲染您的菜單欄。例如：

```html

<nav>

<ul>

<li><a href="#">主菜單</a></li>

<li><a href="#">子菜單1</a></li>

<li><a href="#">子菜單2</a></li>

<li><a href="#">子菜單3</a></li>

</ul>

</nav>

現在，您應該能夠看到一個簡單的橫向二級菜單了。

## 隱藏或顯示子菜單

要隱藏或顯示子菜單，您需要使用 HTML 和 CSS 來編寫相應的代碼。例如：

```html

<nav>

<ul>

<li><a href="#">主菜單</a></li>

<li><a href="#">子菜單1</a></li>

<li><a href="#">子菜單2</a></li>

<li><a href="#">子菜單3</a></li>

</ul>

</nav>

<style>

nav ul {

display: none;

</style>

<script>

document.querySelector('nav ul').style.display = 'block';

</script>

在這個例子中，`<nav>` 元素中的子列表使用 `display: none` 來隱藏，而外部 JavaScript 代碼使用 `document.querySelector('nav ul')` 來找到子菜單列表，并將其設置為 `display: block`，這樣子菜單就會顯示出來。

## 總結

通過使用 CSS 樣式，您可以創建橫向二級菜單，并可以隱藏或顯示子菜單。使用 HTML 和 CSS 的相互協作，您可以創建美觀且易于使用的用戶界面。