在纯CSS的现有按钮上添加一个小的下拉菜单

Question

我的应用程序中有一个简单的按钮。当我把鼠标悬停在它上面时，我想添加一个小下拉列表，还想看到图标，然后在选项列表上显示名称，并且都是纯css格式的，这样我就可以在点击菜单时链接到php页面。http://jsfiddle.net/seby20/JB59c/

CSS

.ann_search_submit {
    background:transparent url("images/fancybutton.png") no-repeat top left;
    max-width : 131px;

}
.newhead{
    padding-left:4px;
    padding-right:4px;
    margin-right:2px;
    padding-top:4px;
    padding-bottom:1px;
    cursor:pointer;
    line-height:16px;
    margin-top:2px;
    text-decoration: none;
    font-size: 12px;
}
        .ann_submit {
        color : #09509B;
        padding: 4px;
        margin:0px 0px 5px 3px;
        border : none;
        background:transparent url("images/fancybutton.png") no-repeat top right;
    }
    .ann_submit:hover {
        color:#0271E6;
    }

HTML

        <div class="newhead" >
      <div class="ann_search_submit">
        <div class="ann_submit"><img src="images/plus-icon 2.png" title="Add Call" align="absmiddle" >
          <?=HEAD_BUTTON_ADD_CALL?>
          &nbsp;</div>
      </div>
    </div>

Answer 1

使用此代码

HTML

  <div class="ann_search_submit">
      <div class="ann_submit"> 
          <img src="http://www.mkstats.ca/plus-icon 2.png" title="Add Call" align="absmiddle" >
          Add New Phone Call</div>
          <div class="dropdown">
          Option1 <br/>
          Option2 <br/>
         Option3 <br>
      </div>
  </div>

CSS

    .ann_search_submit {
    background:transparent url("images/fancybutton.png") no-repeat top left;
    max-width : 131px;
}
.newhead {
    padding-left:4px;
    padding-right:4px;
    margin-right:2px;
    padding-top:4px;
    padding-bottom:1px;
    cursor:pointer;
    line-height:16px;
    margin-top:2px;
    text-decoration: none;
    font-size: 12px;
}
.ann_submit {
    color : #09509B;
    padding: 4px;
    margin:0px 0px 5px 3px;
    border : none;
    background:transparent url("http://www.mkstats.ca/fancybutton.png") no-repeat top right;
}
.ann_submit:hover {
    color:#0271E6;
}
.dropdown {
    display: none;
    height:100px;
    width:200px;
}
.ann_search_submit:hover>.dropdown {
    display: block;
}