导航栏下拉问题答案

【问题标题】：Navigation Bar Dropdown Issue导航栏下拉问题
【发布时间】：2018-07-19 21:52:33
【问题描述】：

我正在尝试仅使用 CSS 制作导航菜单（因为我不知道 JavaScript），它有一个子菜单，在单击顶级链接时出现，然后在再次单击顶级链接时消失.我使用了复选框和标签来实现这一点。

效果很好，但是有一个小问题。如果您单击“菜单 2”，则会出现下拉菜单，这很好。但是，如果您将鼠标悬停在“菜单 2”之外并再次返回，则子菜单会重新出现，而无需先单击“菜单 2”。

我怎样才能使当您将鼠标悬停在菜单项 2 上并再次返回时，必须再次单击“菜单 2”才能显示子菜单？

nav {
  width: 200px;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav>ul>li {
  float: left;
}

nav a {
  height: 40px;
  width: 100px;
  display: block;
  background: lightblue;
  text-decoration: none;
  line-height: 40px;
  text-align: center;
  color: black;
}

nav>ul>li>a:hover {
  background: skyblue;
}

nav ul ul a {
  height: 20px;
  background: lightgreen;
  line-height: 20px;
}

nav ul ul a:hover {
  background: limegreen;
}

nav label {
  display: block;
}

nav input {
  display: none;
}

nav ul ul {
  display: none;
}

nav li:hover input:checked+ul {
  display: block;
}

<nav>
  <ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#"><label for="submenucb">Menu 2&#9662;</label></a>
      <input id="submenucb" type="checkbox">
      <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 1</a></li>
      </ul>
    </li>
  </ul>
</nav>

【问题讨论】：

为什么不把鼠标悬停在上面：codepen.io/anon/pen/LOWxmQ?editors=1100
我想要悬停，以便在鼠标移开时子菜单消失。否则，如果我在菜单上有多个下拉菜单，它们可能同时都可见。我只想随时显示一个下拉菜单。
我认为，您应该删除输入并仅在悬停时打开它 - 如果您同时在单击和悬停时打开它，那么它会让用户感到困惑 - 我可能会使用一次然后它会成为一个可用性问题，阻止我使用该网站 - codepen.io/anon/pen/LOWxmQ?editors=1100
我希望行为是：如果您单击“菜单 2”，则会出现下拉菜单，然后如果您将鼠标悬停，它就会消失。然后，如果您再次将鼠标悬停在“菜单 2”上，则需要单击它以使子菜单再次出现，而不是它已经打开。
你不能只用css来做到这一点，因为你不能在不点击的情况下取消选中一个复选框，除非你使用一些js

标签： html css checkbox drop-down-menu

【解决方案1】：

您可以从选择器中删除:hover。仅当单击该项目时才会出现下拉列表。

 input:checked+ul {
      display: block;
    }

nav {
  width: 200px;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav>ul>li {
  float: left;
}


/* top level links */

nav a {
  height: 40px;
  width: 100px;
  display: block;
  background: lightblue;
  text-decoration: none;
  line-height: 40px;
  text-align: center;
  color: black;
}

nav>ul>li>a:hover {
  background: skyblue;
}


/* sub level links */

nav ul ul a {
  height: 20px;
  background: lightgreen;
  line-height: 20px;
}

nav ul ul a:hover {
  background: limegreen;
}


/* dropdown behaviour */

nav label {
  display: block;
}

nav input {
  display: none;
}

nav ul ul {
  display: none;
}

input:checked+ul {
  display: block;
}

<nav>
  <ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#"><label for="submenucb">Menu 2&#9662;</label></a>
      <input id="submenucb" type="checkbox">
      <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 1</a></li>
      </ul>
    </li>
  </ul>
</nav>

【讨论】：