Как настроить таргетинг на соседнего брата родительского элемента дочернего элемента?

В следующем html у меня есть элемент li с id="currency-dropdown". Его родителем является элемент ul с class="nav". Существует элемент div, id="currency", который является соседним элементом элемента ul. Элемент div имеет атрибут -- visibility:hidden; Когда элемент li находится над элементом, как мне настроить таргетинг на элемент div и изменить его атрибут на видимость: видимый?

<div class = "col-12  col-md-4" id = "header-top-right-area">
    <ul class = "nav">
        <li class = "nav-item" id = "currency-dropdown">
            <a href = "#" class = "nav-link active">
                USD <i class = "fa fa-chevron-down"></i>
            </a>
        </li>        
    </ul>
    <div id = "currency" class = "dropdown">
        <ul class = "list-unstyled">
            <li>EURO</li>
        </ul>
    </div>
</div>

Скелет сксс:

.nav {
    #currency-dropdown {
        &:hover {
           //When hovered over, changed #currency to visible:visible
        }    
    }                          
}

#currency {
    visibility:hidden;
}