HTML5+CSS二级菜单

Question

#HTML5+CSS二级菜单
一级菜单下的二级菜单，鼠标经过时变颜色

Answer 1

要创建带有二级菜单的一级菜单，并在鼠标经过时改变颜色，您可以使用HTML和CSS来实现。下面是一个示例代码，演示了如何实现这个效果：

HTML代码：

<nav>
  <ul class="menu">
    <li><a href="#">一级菜单</a>
      <ul class="submenu">
        <li><a href="#">二级菜单1</a></li>
        <li><a href="#">二级菜单2</a></li>
        <li><a href="#">二级菜单3</a></li>
      </ul>
    </li>
    <li><a href="#">一级菜单</a>
      <ul class="submenu">
        <li><a href="#">二级菜单1</a></li>
        <li><a href="#">二级菜单2</a></li>
        <li><a href="#">二级菜单3</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS代码：

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  display: inline-block;
  position: relative;
}

.menu a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

.menu li:hover > a {
  background: #f00; /* 鼠标经过时一级菜单的背景色 */
  color: #fff; /* 鼠标经过时一级菜单的文字颜色 */
}

.submenu {
  display: none;
  position: absolute;
  background: #fff; /* 二级菜单的背景色 */
}

.menu li:hover .submenu {
  display: block;
}

.submenu li {
  display: block;
}

.submenu a {
  padding: 5px;
  color: #000;
}

.submenu a:hover {
  background: #f00; /* 鼠标经过时二级菜单的背景色 */
  color: #fff; /* 鼠标经过时二级菜单的文字颜色 */
}

在示例代码中，我们使用了一个<nav>元素来包裹菜单，使用无序列表<ul>和列表项<li>来创建一级菜单和二级菜单。通过CSS样式来设置菜单的样式和鼠标经过时的效果。

一级菜单使用了 .menu 类选择器，设置了一些基本样式，包括横向展示和去除默认的列表样式。鼠标经过时，通过 :hover 伪类选择器来改变背景色和文字颜色。

二级菜单使用了 .submenu 类选择器，设置了一些样式，包括绝对定位和初始状态下的隐藏。在一级菜单项的 :hover 伪类选择器中，通过选择器 .submenu 来显示二级菜单。

通过在二级菜单项的 :hover 伪类选择器中设置背景色和文字颜色，可以实现鼠标经过时二级菜单的颜色变化。

您可以根据需要修改示例代码中的背景色、文字颜色和其他样式来适应您的设计需求。