html - 导航栏下拉问题

Question

我试图只使用 CSS 制作一个导航菜单(因为我不懂 JavaScript)，它有一个子菜单，当点击顶级链接时出现，然后在再次点击顶级链接时消失.我使用了复选框和标签来实现这一点。

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

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

here is a codepen I made to demonstrate

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>

Answer 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>