.dropdown-btn-container {
    position: relative;
    transition-duration: 0.5s;
}

    .dropdown-btn-container ul {
        background: var(--main-color-2);
        visibility: hidden;
        opacity: 0;
        position: absolute;
        transition: all 0.5s ease;
        left: 0;
        display: none;
    }

        .dropdown-btn-container:hover > ul,
        .dropdown-btn-container:focus-within > ul,
        .dropdown-btn-container ul:hover {
            visibility: visible;
            opacity: 1;
            display: block;
        }

        .dropdown-btn-container ul > li {
            color: white;
            padding-block: 0.5rem;
            padding-inline: 1rem;
            font-family: inherit;
            font-size: 1rem;
            background: var(--main-color-2);
        }
            .dropdown-btn-container ul > li:hover {
                cursor: pointer;
                background: var(--main-color-1);
            }