How to show one element when hovering over another in SASS?

Question

css

There is such a structure

<div class="dropdown">
    <button class="dropdown__button">
        <i class="fas fa-bars"></i>
        <span>Категории</span>
    </button>
     <div class="dropdown__content">
           <a href="#" class="dropdown__link">Межкомнатные двери</a>
            <a href="#" class="dropdown__link">Входные двери</a>
            <a href="#" class="dropdown__link">Фурнитура</a>
            <a href="#" class="dropdown__link">Лестницы</a>
            <a href="#" class="dropdown__link">Мебель</a>
            <a href="#" class="dropdown__link">Арки</a>
            <a href="#" class="dropdown__link">Услуги</a>
      </div>
 </div>

And its styling in SASS

.dropdown 
    width: 235px
    &__button
        width: 100%
        text-align-last: left
        padding: 14px 0px 14px 27px
        box-sizing: border-box
        cursor: pointer
        font-size: 18px
        text-transform: uppercase
        color: #ffffff
        background-color: $color-primary
        border: none
        span
            padding-left: 5px

    &__content
        display: none
                
    &__link
        padding: 20px 0px 20px 27px
        border-bottom: 1px solid rgba(209, 209, 209, .5)
        color: $color-adding

How to make it so that when hovering over the CATEGORY button, nested elements are displayed?

Answer 1

.dropdown
    &__button:hover + &__content,
    &__content:hover
        display: block