Good afternoon, I am starting to learn HTML, in this case I am experimenting with the menu, and I would like the submenu to be opened by passing the mouse over the menu link.
This is the pull-down menu I have now.
The options "Slabs, Stones, Promotions, 20x30 Photos" are displayed when I move the mouse over the list (option "Products") but not in the link that is inside that list. p>
So my question is how to make the submenu open when the mouse passes over the link ( <a> )
This is my 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>
And this is the 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;
}
So, to be more specific, my query would be; how do I make the submenu unfold only when I mouse over the link, and also my other problem is that the submenus lists are being placed side by side but not below.