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

Question

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

<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并使用著名的'复选框hack'来实现所需的功能>]

如何运作？只需添加一个复选框和该复选框的标签即可。同时隐藏复选框。

单击标签时，复选框将显示: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>