Hola a todos, les quiero pedir ayuda ya que quiero usar una imagen de boton (para un checkbox), me refiero usar un boton que para hecer un menu adaptable a dispositivos moviles pero cuando la imagen esta sobre el boton y le doy click a la imagen no pasa nada, aqui esta el codigo.
.menu_Menu{
display: none;
}
header label img{
width: 30px;
height: 30px;
}
header label{
display: none;
width: 30px;
height: 30px;
padding: 10px;
background-color: #cacaca;
height: 30px;
width: 30px;
margin-top: -15px;
}
header label:hover{
cursor: pointer;
}
#menu ul li a{
margin: 10px;
padding-right: 20px;
position: relative;
text-decoration: none;
color: #6e6e6e;
transition: all .5s;
}
#menu ul li{
float: right;
color: #6e6e6e;
text-decoration: none;
font-size: 30px;
transition: all .5s;
}
#Inicio{
float: left;
font-size: 70px;
text-decoration: none;
color: #6e6e6e;
text-shadow: 0px 0px 0px #222222, 1px 1px 0px #222222, 2px 2px 0px #222222;
}
header label{
display: block;
}
.menu_Menu{
display: block;
}
#menu{
position: absolute;
background: #000;
margin-left: -70%;
}
#menu ul li{
clear: both;
float: none;
border-bottom: 1px solid #222222;
}
#Inicio{
margin-left: -10px;
border-bottom: 1px solid #222222;
}
#menu ul li a:hover{
font-size: 30px;
}
.menu_Menu:checked ~ #menu{
margin: 0;
}
<header>
<input name="menuResponsive" type="checkbox" class="menu_Menu">
<label for="menuResponsive"><img src="aqui va cualquier imagen" alt="Menu"></label>
</div>
<nav id="menu">
<a id="Inicio" href="index.php">Inicio</a>
<ul>
<li><a class="Pag1" href="">Pagina 1</a></li>
<li><a class="Pag2" href="">Pagina 2</a></li>
<li><a class="Pag3" href="">Pagina 3</a></li>
</ul>
</nav>
</header>
Algo asi es mi codigo solo que en donde puse "cualquier imagen" va la imagen que sea, y perdon si mi css no es muy bueno esque apenas lo estoy aprendiendo, o tambien no se si la manera en la que lo estoy haciendo es la correcta, si estoy mal me ayudaria que me corrigieran. Les agradeceria su ayuda.