#main-nav      {
        height: 20px; /* configura a la altura que desea para su menú */
        margin: 0 0 10px; /* darle un poco de espacio*/
}

#main-nav a {
    color: #222; /* Color oscuro */
    /* font-family: 'Inter', sans-serif; */
    font-size: 16px;
    font-weight: 500; 
    text-decoration: none;
    /* color: #222; Color oscuro */
     /* text-decoration: none; */
    /* text-transform: uppercase; */
    transition: color 0.3s ease; /* Transición suave */
}



#main-nav ul   {
        margin: 0; padding: 0; }
#main-nav li   {
        display: block;
        float: left;
        line-height: 30px; /* Esto ha de ser igual al #main-nav height */
        height: 30px; /* Esto ha de ser igual al #main-nav height */
        margin: 0; padding: 0; /* only needed if you don't have a reset */
        position: relative; /* esto es necesario con el fin de posicionar los submenús */
}
#main-nav li a {
        display: block;
        height: 30px;
        line-height: 30px;
        padding: 0 15px;

        
}






#main-nav ul ul { /* esto va dirigido a todos los submenús */
        display: none; /* ocultar todos los submenús de la vista */
        position: absolute;
        top: 30px; /* esto debe ser la misma altura que el menú de nivel superior - height + padding + borders */
}
#main-nav ul ul li { /* esto va dirigido a todos los submenús */
        float: none; /* sobreescribir menu hasta arriba */
        width: 150px; /* establece el ancho que desea para sus submenús. Esto debe coincidir con el valor que pusimos abajo */
}
#main-nav ul ul li a {
 
    display: block; /* Importante para que el padding funcione en todo el bloque */
    font-size: 16px;
    line-height: 1.2;
    text-decoration: none;
    position: fixed;
    /* left: 0; */
    width: 20%;
    padding: 5px 20px; /* dar a nuestros enlaces del submenú un bonito boton */
}


#main-nav ul li:hover > ul {
        display: block; /* mostrar submenú cuando el ratón pase por encima del menú principal */
}


#main-nav ul ul li ul {
        left: 150px; /*  esto debe coincidir con el ancho del menú de arriba -- width + padding + borders */
        top: 0; /* esto asegura que el submenú comience en consonancia con el menú superior */
}

#main-nav {
float: right;
}