I would like the submenu to be displayed dropdown when my mouse is obove the respective item, but when i place the mouse over it, the submenu appears to the right of the main menu, not below.
Ive tried doing it by setting a fixed width for the items on the menu but it doesnt seem to work properly.
How can i make it work the expected way?
My HTML Code:
nav {
overflow: hidden;
width: 100%;
text-align: center;
align-content: center;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
}
nav ul li {
float: left;
}
.elementoMenu a {
float: left;
color: #ff9900;
padding: 14px 16px;
text-decoration: none;
display: block;
font-size: 17px;
}
.elementoMenu a:hover {
color: white;
background-color: #ff9900;
}
.submenu {
display: none;
}
.elementoMenu a:first-child:hover+.submenu, .submenu:hover {
display: inline-block;
position: absolute;
background-color: #663300;
}<nav><ul><li class="elementoMenu"><a href="">Inicio</a></li><li class="elementoMenu"><a href="">Carta</a><div class="submenu"><a href="1.html">Platos de Tandoori</a><a href="1.html">Platos de Curry</a><a href="1.html">Arroces</a><a href="1.html">Platos vegetales</a></div></li><li class="elementoMenu"><a href="">Menú</a><div class="submenu"><a href="1.html">Menú del día</a><a href="1.html">Menú degustación</a></div></li><li class="elementoMenu"><a href="">Restaurante</a><div class="submenu"><a href="1.html">Nuestra historia</a><a href="1.html">Cómo llegar</a></div></li><li class="elementoMenu"><a href="">Reservas</a></li></ul></nav>