.dropdown .dropdown-content {
    max-height: 0;
    overflow: hidden;
    z-index:10;
    transition-duration: 500ms;
}
.dropdown .dropdown-content .dropdown-measure {
    /**
     * display:inline-block; includes children's margins
     * needed to correctly retrieve this nodes' height
     * https://stackoverflow.com/a/52174248/11516443
     */
    display: inline-block;
    width: 100%;
}
.dropdown .dropdown-title {
    cursor: pointer;
}

/* https://www.w3schools.com/howto/howto_css_arrows.asp */
.dropdown .dropdown-arrow {
    border: solid #4d342c;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    
    transition-duration: 500ms;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.dropdown .dropdown-single.open .dropdown-arrow {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

/* hover effects are only used on desktop */
@media only screen and (min-width:801px){
    .dropdown.dropdown-hover .dropdown-single {
        position: relative;
    }
    .dropdown.dropdown-hover .dropdown-single .dropdown-content {
        position: absolute;
        /*display: none;*/
        max-height: unset;
        overflow: unset;
        visibility: hidden;
        opacity: 0;
    }
    .dropdown.dropdown-hover .dropdown-single:hover .dropdown-content {
        /*display: block;*/
        visibility: visible;
        opacity: 1;
    }
    .dropdown.dropdown-hover .dropdown-arrow {
        display: none; 
    }
}

/* optional styling */
.dropdown.dropdown-default .dropdown-content {
    background: #ddd;
}
.dropdown.dropdown-default .dropdown-content ul li:hover {
    background: #bbb;
}
.dropdown.dropdown-default .dropdown-content ul {
    list-style-type: none;
}
.dropdown.dropdown-default .dropdown-content ul a {
    text-decoration: none;
}