Aspectos a tomar en cuenta
Se deben tomar varias consideraciones en cuenta antes de intentar solucionar el problema planteado:
Para desplegar el menú tal y como se muestra en la siguiente imagen:
Deberás anidar otra lista dentro de la lista principal que forma el menú.
En la regla ul{}
tienes definida la propiedad padding
a 1em
. Por lo tanto, el relleno en todas las direcciones sería de la unidad que has establecido, quedando como resultado lo que se muestra en la siguiente imagen cuando colocas el cursor sobre él:
Lo más simple
Solamente tendrías que reemplazar una parte del código CSS. Por lo tanto, tendrías que reemplazar padding: 1em
por padding: 1em 0
, es decir, reemplazar esto:
ul {
border: 1px solid rgb(15, 66, 107);
padding: 1em;
}
Por este otro:
ul {
border: 1px solid rgb(15, 66, 107);
padding: 1em 0;
}
Ya que con padding: 1em 0
estarías aplicando únicamente relleno vertical, donde 1em
es el relleno vertical, mientras que con cero (0
) no habría relleno horizontal. Es decir, daría lugar a esto:
Esto es cuando se coloca el cursor sobre él.
Propuesta (un poco más compleja):
De acuerdo a lo anteriormente descrito, una posible solución práctica al problema pleanteado sería el uso de las cajas flexibles en los ítems, considerando el grado de compatibilidad actual con los principales navegadores Web.
Por lo tanto, las reglas CSS podrian quedar así:
body {
font-family: "Open Sans", sans-serif, arial;
}
.lista {
--color: rgb(15, 66, 107);
}
.flex {
display: flex;
align-items: center;
}
.flex,
.lista__item--inner,
.lista__item--outer,
.lista--enlace {
position: relative;
}
.lista {
list-style: none;
padding: 0;
border: 1px solid var(--color);
/* Permite establecer la anchura
del elemento en función de su contenido */
width: max-content;
}
.lista__item--outer:hover .lista--inner {
display: block;
animation: 300ms ease desplegar 1;
}
.lista__item--outer:not(:first-of-type) {
border-left: 1px solid var(--color);
}
.lista__item--inner:not(:first-of-type) {
border-top: 1px solid var(--color);
}
.lista__item {
color: var(--color);
}
.lista__item, .lista--enlace {
transition: 300ms ease;
}
.lista__item--outer:hover,
.lista__item--outer:hover > .lista--enlace,
.lista__item--inner:hover,
.lista__item--inner:hover > .lista--enlace{
background-color: var(--color);
color: white;
z-index: 10;
}
.lista--enlace {
text-decoration: none;
padding: 0 15px;
color: var(--color);
min-height: 50px;
}
/* Submenú */
.lista--inner {
display: none;
position: absolute;
margin: auto;
/* En en este caso, se modifica el origen de la
transformación de este elemento desde la posición
izquierda y superior. Esto adyudará a dar el efecto
de despliegue del submenú */
transform-origin: left top;
/* Se establece a -1px porque el border del elemento
padre es de 1px */
left: -1px;
top: 100%;
padding: 0;
width: max-content;
min-width: 200px;
max-width: 250px;
background-color: white;
}
/* Animaciones */
@keyframes desplegar {
from {
transform: scaleY(0.5);
/*
La propiedad transform: scaleY(0.5) junto a la
propiedad transform-origin: left top; permitirá
crear un efecto visual de un submenú que se desenrrolla.
*/
}
}
Mientras que el código HTML quedaría ligeramente modificado con anidamiento incluido:
<ul class="lista lista--outer flex">
<li class="lista__item--outer">
<a class="flex lista--enlace" href="#">Item 1</a>
<ul class="lista lista--inner">
<li class="lista__item--inner"> <a class="flex lista--enlace" href="#">Lista Nº 1</a></li>
<li class="lista__item--inner"> <a class="flex lista--enlace" href="#">Lista Nº 2</a></li>
<li class="lista__item--inner"> <a class="flex lista--enlace" href="#">Lista Nº 3</a></li>
</ul>
</li>
<li class="lista__item--outer"><a class="flex lista--enlace" href="#">ITEM 2 </a></li>
<li class="lista__item--outer"><a class="flex lista--enlace" href="#">Item 3 </a></li>
<li class="lista__item--outer"><a class="flex lista--enlace" href="#">Item 4 </a></li>
<li class="lista__item--outer"><a class="flex lista--enlace" href="#">Item 5 </a></li>
<li class="lista__item--outer"><a class="flex lista--enlace" href="#">Item 6 </a></li>
<li class="lista__item--outer"><a class="flex lista--enlace" href="#">Item 7 </a></li>
</ul>
Dando como resultado deseado el ejemplo que se visualiza en la siguiente imagen:
Para el caso anterior, se utilizó la metodología BEM. Sin embargo, pueden utilizarse cualquier otro método o crear uno propio.
Sin extendernos más probemos las siguientes líneas de código:
body {
font-family: "Open Sans", sans-serif, arial;
}
.lista {
--color: rgb(15, 66, 107);
}
.flex {
display: flex;
align-items: center;
}
.flex,
.lista__item--inner,
.lista__item--outer,
.lista--enlace {
position: relative;
}
.lista {
list-style: none;
padding: 0;
border: 1px solid var(--color);
/* Permite establecer la anchura
del elemento en función de su contenido */
width: max-content;
}
.lista__item--outer:hover .lista--inner {
display: block;
animation: 300ms ease desplegar 1;
}
.lista__item--outer:not(:first-of-type) {
border-left: 1px solid var(--color);
}
.lista__item--inner:not(:first-of-type) {
border-top: 1px solid var(--color);
}
.lista__item {
color: var(--color);
}
.lista__item, .lista--enlace {
transition: 300ms ease;
}
.lista__item--outer:hover,
.lista__item--outer:hover > .lista--enlace,
.lista__item--inner:hover,
.lista__item--inner:hover > .lista--enlace{
background-color: var(--color);
color: white;
z-index: 10;
}
.lista--enlace {
text-decoration: none;
padding: 0 15px;
color: var(--color);
min-height: 50px;
}
/* Submenú */
.lista--inner {
display: none;
position: absolute;
margin: auto;
/* En en este caso, se modifica el origen de la
transformación de este elemento desde la posición
izquierda y superior. Esto adyudará a dar el efecto
de despliegue del submenú */
transform-origin: left top;
/* Se establece a -1px porque el border del elemento
padre es de 1px */
left: -1px;
top: 100%;
padding: 0;
width: max-content;
min-width: 200px;
max-width: 250px;
background-color: white;
}
/* Animaciones */
@keyframes desplegar {
from {
transform: scaleY(0.5);
/*
La propiedad transform: scaleY(0.5) junto a la
propiedad transform-origin: left top; permitirá
crear un efecto visual de un submenú que se desenrrolla.
*/
}
}
<ul class="lista lista--outer flex">
<li class="lista__item--outer">
<a class="flex lista--enlace" href="#">Item 1</a>
<ul class="lista lista--inner">
<li class="lista__item--inner"> <a class="flex lista--enlace" href="#">Lista Nº 1</a></li>
<li class="lista__item--inner"> <a class="flex lista--enlace" href="#">Lista Nº 2</a></li>
<li class="lista__item--inner"> <a class="flex lista--enlace" href="#">Lista Nº 3</a></li>
</ul>
</li>
<li class="lista__item--outer"><a class="flex lista--enlace" href="#">ITEM 2 </a></li>
<li class="lista__item--outer"><a class="flex lista--enlace" href="#">Item 3 </a></li>
<li class="lista__item--outer"><a class="flex lista--enlace" href="#">Item 4 </a></li>
<li class="lista__item--outer"><a class="flex lista--enlace" href="#">Item 5 </a></li>
<li class="lista__item--outer"><a class="flex lista--enlace" href="#">Item 6 </a></li>
<li class="lista__item--outer"><a class="flex lista--enlace" href="#">Item 7 </a></li>
</ul>
Se podrían realizar más cosas, sin embargo, no lo trataré acá para evitar que esta respuesta sea demasiada extensa.