如何定位孩子父元素的相邻兄弟姐妹？

Question

在以下html中，我有一个li元素，其id为“ =“ currency-dropdown””。它的父项是带有class =“ nav”的ul元素。有一个div元素id =“ currency”，它是ul元素的相邻同级元素。 div元素具有-可见性：隐藏;当li元素悬停在上方时，如何定位div元素并将其属性更改为visible：visible？

<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>

骨骼scss：

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

#currency {
    visibility:hidden;
}