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