html - 设置下拉菜单的悬停效果

Question

当我将鼠标悬停在红色设置图标上时，我希望出现下拉菜单。当我将鼠标移开设置图标或下拉菜单时，它会回到设置图标。

我尝试使用

可见性：隐藏；能见度：可见；

我似乎无法弄清楚。

http://jsbin.com/OmEfEGu/2/edit

HTML：

<div class="dropdown-menu">

<div class="check-icon"></div>
<li>Mark as Answered</li>

<div class="trash-icon"></div>
<li>Delete Questions</li>
</div>

CSS：

.settings-icon {
position: relative;
width: 18px;
height: 20px;
background-color: red;
float: right;
margin-right: 10px;
border-top: 1px solid #8b9399;
border-left: 1px solid #8b9399;
border-right: 1px solid #8b9399;

}

.dropdown-menu {
border: 1px solid #8b9399;
background-color: #ffffff;
float: right;
width: 140px;
height: 50px;
margin-right: -20px;
margin-top: 20px;
list-style: none;
font-size: 13px;
}

.settings-icon:hover .dropdown-menu {
visibility: visible;
}