导航栏下拉问题

Question

我正在尝试仅使用CSS创建导航菜单（因为我不了解JavaScript），该菜单具有一个子菜单，该菜单在单击顶级链接时出现，然后在再次单击顶级链接时消失。 我使用了复选框和标签来实现此目的。

它运作良好，但是有一个小问题。 如果单击“菜单2”，则出现下拉菜单。 但是，如果您将鼠标悬停在“菜单2”上并再次返回，则子菜单会再次出现，而无需先单击“菜单2”。

我该如何做，以便当您从菜单项2悬停并再次返回时，必须再次单击“菜单2”以显示子菜单？

这是我制作来演示的Codepen

 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>