TODO HOVER: Cómo hacer una lista dentro de una lista con efecto hover


    https://es.stackoverflow.com/questions/324525/c%C3%B3mo-hago-una-lista-dentro-de-una-lista-con-css-hover
    
    
    
<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>



<style>


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.
    */
  }
}

</style>
viernes, 3 de junio de 2022

Cómo hacer una lista dentro de una lista con efecto hover
