Estou tentando fazer com que um menu apareça quando o checkbox
estiver checado
/* Menu Mobile */
.mobile{
position: fixed;
display: block;
}
.mobile input{
display: none;
}
.mobile label{
color: yellow;
font-size: 8vh;
text-align: center;
cursor: pointer;
width: 8vh;
display: none;
}
.menu-mb{
background-color: #111;
display: none;
margin-top: 9vh;
width: 75vw;
height: 100vh;
position: fixed;
}
.menu-mb ul{
list-style: none;
}
.menu-mb ul li{
float: none;
width: 100%;
}
.menu-mb a{
text-decoration: none;
color: white;
padding: 2vh;
display: block;
text-align: center;
}
@media(max-width: 800px){
.mobile label{
display: block;
}
.mobile input:checked .menu-mb{
display: block;
}
}
<!-- Menu Mobile -->
<div class="mobile" style="width: 100%; background-color: #111">
<input type="checkbox" id="bt-menu">
<label for="bt-menu">≡</label>
</div>
<nav class="menu-mb">
<ul>
<li><a href="#" target="_self">Shounen</a></li>
<li><a href="#" target="_self">Shoujo</a></li>
<li><a href="#" target="_self">Ecchi</a></li>
</ul>
</nav>
Tentei usar o :checked
para quando o input
estiver checado o menu ficar com disblay: block;
mas não funciona, Só funciona quando eles estão em uma mesma div
mas não quero fazer assim.
.mobile input:checked
Porque você não faz isso. Só existe um input:checked na classe mobile