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 的相互协作，您可以创建美观且易于使用的用户界面。