CSS递归菜单在悬停时显示子菜单

Question

我使用 ngtemplates 创建了一个 Angular 递归菜单。我想制作在悬停时显示子菜单的菜单。但是，当我退出主菜单的悬停时，我遇到了麻烦，子菜单消失了。

这是我生成的示例代码结构。

a+ul {
  display: none;
}

a:hover+ul {
  display: block
}

<ul>
  <li>
    <a>a</a>
    <ul>
      <li>
        <a>b</a>
        <ul>
          <li><a>c</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 1

这里的问题是，一旦您开始将鼠标悬停在 c 文本上，您就不再将鼠标悬停在 a 上。所以 a:hover + ul 不再有效并且 ul 消失了。要解决这个问题，您可以将 ul 放在包装器中并像这样调整选择器和 html:

.menu-wrapper>ul {
  display: none;
}

.menu-wrapper:hover>ul {
  display: block
}

<ul>
  <li>
    <div class="menu-wrapper">
      <a>a</a>
      <ul>
        <li>
          <div class="menu-wrapper">
            <a>a</a>
            <ul>
              <li><a>c</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>