.dropdown { display: inline-block; background: fade(#0c0c0c, 70%); color: #fff; min-width: 200px; border: 2px solid #9475B2; font-family: "Open Sans", sans-serif; text-align: left; z-index: 999; margin: 0 2px; transition: background .5s; &__option { padding: 0 1px 0 4px; display: none; color: #FFF; text-decoration: none; clear: both; transition: background .2s; &:hover { background: fade(#151515, 50%); } &:active { background: fade(#151515, 70%); } &--selected { display: inline-block; } } &__title { display: inline-block; padding-left: 4px; } &:hover { background: fade(#151515, 80%); .dropdown__option { display: block; float: none; } .dropdown__title { display: none; } } @media (max-width: 1024px) { float: none !important; margin-bottom: 5px; text-align: center; &__title, &__option { display: block !important; padding: 3px 6px; float: none !important; } &__title { border-bottom: 2px solid #9475B2; } &__option { &:not(:last-child) { border-bottom: 2px solid #9475B2; } } } }