如何使用 CSS 在两个 div 之间移动？

Question

我正在尝试以下操作：

<header>
    <input type="checkbox" class="menu-toggle">
</header>
<nav class="top-navigation">
    <ul class="top-menu">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
    </ul>
</nav>

我的 CSS 如下所示：

.top-menu{
    display: none;
}
.menu-toggle:checked .top-menu{
    display: block;
}

但我没能做到。我也试过：

.menu-toggle:checked ~ .top-menu

但也失败了

如果我可以将 input[checkbox] 放在 <nav> 中，我就能让它工作。但实际上出于模板目的，我需要像上面那样放置它 HTML （彼此分开）。

我该怎么做？我在这里做错了什么？

Answer 1

像这样将导航包裹在 header 内：

<header>
    <input type="checkbox" class="menu-toggle">
    <nav class="top-navigation">
       <ul class="top-menu">
           <li><a href="#">A</a></li>
           <li><a href="#">B</a></li>
       </ul>
    </nav>
</header>

并且只有您可以使用：

.top-menu{
    display: none;
}
.menu-toggle:checked + .top-navigation .top-menu{
    display: block;
}

.top-menu{
        display: none;
    }
    .menu-toggle:checked + .top-navigation .top-menu{
        display: block;
    }

<header>
        <input type="checkbox" class="menu-toggle">
        <nav class="top-navigation">
           <ul class="top-menu">
               <li><a href="#">A</a></li>
               <li><a href="#">B</a></li>
           </ul>
        </nav>
    </header>

Answer 2

感谢@BhojendraSah 的回答。对我来说，它是在说：抱歉，这是不可能的——正如@dsfq 在评论中所说的那样：

With this HTML structure it's not possible with :checked. Checkbox needs to be at least outside of header.

但我已经说过，我不能更改我的模板以将它们放在一个容器中。但是我得到的没有这个，这是不可能的。

所以我决定执行B计划：

 <nav class="top-navigation">
    <input type="checkbox" class="menu-toggle">
    <ul class="top-menu">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
    </ul>
</nav>

并做一些额外的浮动和保证金工作人员：

.menu-toggle{
   float: right;
   margin-top: -35px; /* as per my template */
   margin-right: 20px; /* as per my template */
}

让复选框感觉在 <header> 内。非常感谢，我不接受 Bhojendra 的回答，因为我已经说过，我现在实际上不能去做那样的事情。谢谢 Bhojendra。

如何使用 CSS 在两个 div 之间移动？

How to maneuver between two divs using CSS?

html

css