.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown .dropdown-menu {
    margin-top: 0.75rem;
    font-size: 1rem;
    box-shadow: 0 1px 15px 1px rgba(230, 234, 236, 0.35);
    border-radius: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease-in-out;
}

.dropdown.show .dropdown-menu,
.dropdown:hover .dropdown-menu,
.dropdown .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Bridge the gap so hover doesn't close the menu */
.dropdown .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -0.75rem;
    left: 0;
    right: 0;
    height: 0.75rem;
}