关于#css#的问题：悬停下拉菜单

例如，下面是一个简单的 HTML 结构：

<ul class="menu">
  <li><a href="#">菜单项1</a></li>
  <li><a href="#">菜单项2</a>
    <ul class="sub-menu">
      <li><a href="#">子菜单项1</a></li>
      <li><a href="#">子菜单项2</a></li>
      <li><a href="#">子菜单项3</a></li>
    </ul>
  </li>
  <li><a href="#">菜单项3</a>
    <ul class="sub-menu">
      <li><a href="#">子菜单项4</a></li>
      <li><a href="#">子菜单项5</a></li>
      <li><a href="#">子菜单项6</a>
        <ul class="sub-menu">
          <li><a href="#">子菜单项7</a></li>
          <li><a href="#">子菜单项8</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">菜单项4</a></li>
</ul>

CSS 部分：

接下来，使用 CSS 设置菜单的样式。首先，将子菜单设置为隐藏，然后在鼠标悬停时显示它们。可以使用 :hover 伪类选择器来实现这个效果。此外，将菜单的宽度设置为自适应，并添加一些样式来美化菜单。