Navigation Bar Dropdown Issue

I am trying to make a navigation menu using only CSS (since I don't know JavaScript), that has a sub menu that appears when the top level link is clicked, and then disappears when the top level link is clicked again. I have used checkboxes and labels to make this happen.

It works well, but there is a small problem. If you click on "menu 2" the dropdown appears which is fine. But if you hover away from "menu 2" and back again, the sub menu reappears without having clicked on "menu 2" first.

How can I make it so that when you hover away from menu item 2 and back again, "menu 2" has to be clicked on again to make the sub menu appear?

here is a codepen I made to demonstrate

HTML

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

CSS

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;
}