怎样用HTML和CSS创建二级菜单的悬停效果？

在HTML和CSS中创建二级菜单的悬停效果通常涉及到导航栏的设计。下面是一个简单的示例：

首先，在HTML中，你可以设置一个包含一级菜单和二级菜单的结构，比如这样：

<nav class="navbar">
  <ul class="nav-list">
    <li><a href="#">一级菜单1</a>
      <ul class="sub-menu">
        <li><a href="#">二级菜单1.1</a></li>
        <li><a href="#">二级菜单1.2</a></li>
      </ul>
    </li>
    <!-- 更多一级菜单项 -->
  </ul>
</nav>

然后在CSS中，可以添加样式来实现悬停效果：

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav-list li {
  display: inline-block;
}

.nav-list a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: black;
}

.sub-menu {
  display: none; /* 初始隐藏二级菜单 */
  position: absolute; /* 设置二级菜单的定位 */
  background-color: #f9f9f9;
}

.nav-list li:hover > .sub-menu { /* 当一级菜单项被悬停时显示二级菜单 */
  display: block;
}

在这个例子中，当用户将鼠标悬停在一级菜单项上时，对应的二级菜单会显示出来。当鼠标移开时，由于`.sub-menu`的初始状态为`display: none`，所以二级菜单会再次消失。