导航菜单 改变背景色

**导航菜单改变背景色**

在网页设计中，导航菜单是用户与网站交互的重要组成部分。通常，我们会使用CSS来美化导航菜单，使其更具吸引力。但是，有时我们需要改变导航菜单的背景色，以适应不同的主题或风格。在本文中，我们将介绍如何使用CSS改变导航菜单的背景色。

**HTML结构**

首先，让我们创建一个基本的导航菜单结构。我们使用HTML来定义导航菜单的结构。

html<nav>
 <ul>
 <li><a href="#">首页</a></li>
 <li><a href="#">关于我们</a></li>
 <li><a href="#">联系我们</a></li>
 </ul>
</nav>

**CSS样式**

接下来，我们需要定义导航菜单的基本样式。我们使用CSS来设置导航菜单的背景色、字体颜色等。

cssnav {
 background-color: #333; /* 背景色 */
 color: #fff; /* 文字颜色 */
 padding:10px;
}

nav ul {
 list-style: none;
 margin:0;
 padding:0;
}

nav li {
 display: inline-block;
 margin-right:20px;
}

nav a {
 text-decoration: none;
 color: #fff;
}

**改变背景色**

现在，我们需要改变导航菜单的背景色。我们可以使用CSS的`:hover`伪类来实现。

cssnav:hover {
 background-color: #666; /* 背景色 */
}

nav li:hover a {
 color: #fff;
}

在上面的代码中，我们定义了一个`:hover`状态，当鼠标悬停在导航菜单上时，背景色会变成#666。

**使用JavaScript改变背景色**

如果我们需要更复杂的效果，可以使用JavaScript来实现。例如，我们可以使用事件监听器来改变背景色。

javascriptdocument.addEventListener('DOMContentLoaded', function() {
 const nav = document.querySelector('nav');
 nav.addEventListener('mouseover', function() {
 nav.style.background = '#666';
 });
 nav.addEventListener('mouseout', function() {
 nav.style.background = '#333';
 });
});

在上面的代码中，我们使用事件监听器来改变导航菜单的背景色。当鼠标悬停在导航菜单上时，背景色会变成#666，当鼠标移出导航菜单时，背景色会恢复到#333。

**总结**

在本文中，我们介绍了如何使用CSS和JavaScript改变导航菜单的背景色。我们可以使用CSS的`:hover`伪类来实现简单的效果，也可以使用事件监听器来实现更复杂的效果。希望这篇文章能帮助你美化你的网页设计！