带有 CSS 悬停的 HTML 菜单

Question

我正在制作 HTML 菜单。

我对“L3 子菜单”(Item-221、Item-222)有疑问。

当我将鼠标“移入”Item-22 时，会显示 L3。没关系。

但我无法单击 Item-221 或 Item-222。 如果我“鼠标移出”Item-22，那么 L3 就会消失。

是否有(仅)CCS 的解决方案？

CSS 代码:

  ul {
    background-color: #c4c4c4;
    list-style-type: none;
    display: flex;
  }
  li {
    padding: 5px 10px 5px 10px;
    white-space: nowrap;
    position: relative;
  }
  li:hover {
    background-color: #02DB02;
  }
  .menu li>ul {
    padding: 10px 13px 10px 13px;
    position: absolute;
    display: none;
    top: calc(100%);
    left: -8px;
  }
  #it_2:hover #ul_2, #it_22:hover #ul_3 {
    display: block;
  }
  .menu>li>ul>li>ul {
    top: -0.5em;
    left: calc(100% + 10px);
  }

HTML 代码:

<ul class="menu">
  <li>Item-1</li>
  <li id="it_2">Item-2
    <ul id="ul_2">
      <li>Item-21</li>
      <li id="it_22">Item-22
        <ul id="ul_3">
          <li>Item-221</li>
          <li>Item-222</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Item-3</li>
</ul>

Answer 1

最好在列表项上添加填充，这样子菜单就不会消失

ul {
    background-color: #c4c4c4;
    list-style-type: none;
    display: flex;
  }
  li {
    padding: 5px 10px 5px 10px;
    white-space: nowrap;
    position: relative;
  }
  li:hover {
    background-color: #02DB02;
  }
.menu ul > li  {
  position:relative;
  padding: 0 13px 0 13px;
}
  .menu li>ul {
    padding: 10px 0 10px 0;
    position: absolute;
    display: none;
    top: calc(100%);
    left: -8px;
  }
  #it_2:hover #ul_2, #it_22:hover #ul_3 {
    display: block;
  }
  .menu>li>ul>li>ul {
    position: absolute;
    top: -0.5em;
    left: calc(100%);
    padding: 1em;
  }

<ul class="menu">
  <li>Item-1</li>
  <li id="it_2">Item-2
    <ul id="ul_2">
      <li>Item-21</li>
      <li id="it_22">Item-22
        <ul id="ul_3">
          <li>Item-221</li>
          <li>Item-222</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Item-3</li>
</ul>