/* Agrega estilos personalizados si es necesario */
/* Contenedor del botón y el menú desplegable */
#contenedorMenu {
    position: relative;
}

/* Estilo para el menú desplegable */
#menuDesplegable {
    display: none;
    position: fixed; /* Fija el menú en relación con la ventana */
    top: 50px; /* Ajusta la posición superior según sea necesario */
    background-color: #343a40; /* Color de fondo igual al del navbar */
    max-width: 50%; /*Ancho máximo igual al ancho de la pantalla */
    width: auto;
    transition: display 0.3s ease-in-out;
    margin-top: 8px;
}

    #menuDesplegable.show {
        display: block;
    }

    /* Estilo para las opciones del menú desplegable */
    #menuDesplegable ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap; /* Permitir que las opciones se envuelvan en múltiples filas */
        /* Alinea las opciones verticalmente (por defecto) */
        flex-direction: row; /* Por defecto, establecer dirección de flexión como fila */
    }

    #menuDesplegable li {
        margin: 0;
        padding: 8px;
        transition: background-color 0.3s; /* Transición para el cambio de color */
        box-sizing: border-box; /* Evitar que el padding afecte el tamaño total */
        width: 33.3%; /* Establecer el ancho para tres columnas en una fila */
    }

        #menuDesplegable li:hover {
            background-color: #495057; /* Color de resaltado al pasar el mouse */
        }

    #menuDesplegable a {
        color: white;
        text-decoration: none;
    }

@media (min-width: 769px) {
    /*Estilos para pantallas grandes*/
    #menuDesplegable li {
        background-color: #343a40; /*Restaura el fondo de las opciones en pantallas grandes */
    }
}