我有一个问题，我的复选框汉堡菜单下拉菜单是覆盖内容时，点击。它也可能看起来像菜单本身没有"连接"到导航栏时，点击。
我尝试过将位置更改为绝对位置，但这会产生一个无法解决的隐藏问题。
我的第一个stackoverflow，也是我的第一个项目之一。感谢耐心和帮助：）
https://jsfiddle.net/ow82jhbm/1/
第一个
我有一个问题，我的复选框汉堡菜单下拉菜单是覆盖内容时，点击。它也可能看起来像菜单本身没有"连接"到导航栏时，点击。
我尝试过将位置更改为绝对位置，但这会产生一个无法解决的隐藏问题。
我的第一个stackoverflow，也是我的第一个项目之一。感谢耐心和帮助：）
https://jsfiddle.net/ow82jhbm/1/
第一个
1条答案
按热度按时间lp0sw83n1#
通常，这是使用JS完成的，并将同一个菜单作为目标，而不是使用两个菜单。
以您目前的结构，您可以先将
#sidebarMenu变更为position: absolute;，然后将input[type="checkbox"]:checked~#sidebarMenu设为目的，并使用top: 100%;，以确定您的功能表会直接出现在导览列下方。请确定您已移除这些样式中的translateY值。接下来，要让下拉菜单向下推其他内容，你必须在
input[type="checkbox"]:checked~#sidebarMenu上使用position: relative;。这使得菜单向下推并扩展实际的导航栏高度。我使用flex重新配置了移动导航栏的对齐方式。第一个