Buenas tardes, estoy comenzando a aprender HTML, en este caso estoy experimentando con los menu, y quisiera que se abra el submenu al pasar el mouse sobre el link de los menu.
Este es el menu desplegable que tengo ahora.
Las opciones "Lozas, Lapidas, Promociones, Fotos 20x30" se despliegan cuando paso el mouse sobre la lista(opción "Productos") mas no en el link que está dentro esa lista.
Entonces mi duda es como hacer para que se abra el submenu cuando pase el mouse sobre el link(<a>
)
Este es mi html:
<nav>
<ul class="menu">
<li><a href="" class="inicio">Inicio</a></li>
<li class="prod"><a href="#" class="linkprod">Productos</a>
<ul class="submenu">
<li><a href="#">Lozas</a></li>
<li><a href="#">Lápidas</a></li>
<li><a href="#">Promociones</a></li>
<li><a href="#">Fotos 20x30</a></li>
</ul>
</li>
<li><a href="quienessomos.html">Quiénes Somos</a></li>
<li><a href="#">Cómo se hace</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
Y este es el css:
nav .menu {
text-align: center;
}
nav .menu li{
display: inline-block;
padding: 15px 29px;
list-style: none;
}
nav .menu li a{
text-decoration: none;
color: #000;
text-transform: uppercase;
font-family: 'Signika Negative', sans-serif;
font-size: 0.9em;
}
nav .menu li a:hover{
border-bottom: 2px solid #F13006;
border-radius: 4px;
}
/*ACÁ COMIENZA CSS PARA SUBMENU*/
.submenu{
display: none;
}
.prod .linkprod:hover > ul{
position: absolute;
display: block;
}
Entonces, para ser más especifico mi consulta seria; cómo hago para que el submenu se despliegue solamente cuando pase el mouse sobre el link, y también mi otro problema es que las listas de los submenus se están poniendo uno a lado de otro pero no debajo.