使用纯 CSS 创建单击多级下拉菜单

Question

我正在使用纯 CSS 创建一个单击多级下拉菜单。 我从这里找到了一个聪明的解决方案，它就像一个魅力。

<nav>
  <ul>
    <li>
      <a href="#">
        <span class="navtitle">Home</span>
      </a>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle">
        <span class="navtitle">More +</span>
      </a>
      <ul class="dropdown-menu">
        <li>
          <a href="#">
            <span class="navtitle">Sub 1</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="navtitle">Sub 2</span>
          </a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle">
            <span class="navtitle">Sub More +</span>
          </a>
          <ul class="dropdown-menu">
            <li>
              <a href="#">
                <span class="navtitle">Sub 2 1</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span class="navtitle">Sub 2 2</span>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

我的 CSS 行看起来像这样：

*, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
  position: relative;
}

a {
  text-decoration: none;
}

nav {
  display: flex;
}

nav a {
  display: block;
  padding: 8px 10px;
}

nav > li {
  margin: 0 6px
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  background-color: #ddd;
  position: absolute;
  top: 100%;
  min-width: 130px;
  left: 0;
  z-index: 100;
}

.dropdown-menu .dropdown-menu {
  left: 100%;
  top: 0;
}

.dropdown .dropdown-toggle:focus + .dropdown-menu,
.dropdown-menu:hover {
  display: block;
}

问题是我想保留第二级子菜单（即 Sub More +），即使我将鼠标悬停在子菜单区域之外，它仍然很快就会打开。 我知道它来自这个 css，但诀窍是什么？

.dropdown-menu:hover { display: block; }

请参阅我的jsfiddle 。 希望这是有道理的。

Answer 1

发生的情况是，当您单击“Sub More+”时，“More+”按钮会失去焦点，因此显示下拉列表的唯一原因是.dropdown-menu:hover样式。

您可以通过稍微更改 HTML 并使用著名的“复选框技巧”来实现您想要的

这个怎么运作 ？ 只需为该复选框添加一个复选框和一个标签。 也隐藏复选框。

然后，当您单击标签时，复选框会变为:checked并使用该状态显示您的下拉列表。 这种方法也有其自身的局限性，但我认为它可以实现您想要的。

检查以下：

 *, html { margin: 0; padding: 0; box-sizing: border-box; } ul { padding: 0; margin: 0; } li { list-style: none; position: relative; } a { text-decoration: none; } nav { display: flex; } nav a { display: block; padding: 8px 10px; } nav>li { margin: 0 6px } .dropdown { position: relative; } .dropdown-menu { display: none; background-color: #ddd; position: absolute; top: 100%; min-width: 130px; left: 0; z-index: 100; } .dropdown-menu .dropdown-menu { left: 100%; top: 0; } .dropdown .dropdown-toggle:focus { color: red; } /* .dropdown .dropdown-toggle:focus + .dropdown-menu, .dropdown-menu:hover { display: block; } */ input[type="checkbox"] { display: none } input[type="checkbox"]:checked~.dropdown-menu { display: block; }

 <nav> <ul> <li> <a href="#"> <span class="navtitle">Home</span> </a> </li> <li class="dropdown"> <input type="checkbox" id="more" name="more"> <label for="more" class="dropdown-toggle"> More + </label> <ul class="dropdown-menu"> <li> <a href="#"> <span class="navtitle">Sub 1</span> </a> </li> <li> <a href="#"> <span class="navtitle">Sub 2</span> </a> </li> <li class="dropdown"> <input type="checkbox" id="sub-more" name="sub-more"> <label for="sub-more" class="dropdown-toggle">Sub more+</label> <ul class="dropdown-menu"> <li> <a href="#"> <span class="navtitle">Sub 2 1</span> </a> </li> <li> <a href="#"> <span class="navtitle">Sub 2 2</span> </a> </li> </ul> </li> </ul> </li> </ul> </nav>