鼠標懸停出菜單

鼠標指向菜單,出現二級菜單,移動到二級菜單上點擊

這個功能實現HTML如下

<span class="btn-list-group">
  <a class="btn">懸停</a>
  <span class="btn-list-area">
    <a class="btn">新建</a>
    <a class="btn">編輯</a>
    <a class="btn">打開</a>
    <a class="btn">導出</a>
    <a class="btn">導入</a>
    <a class="btn">退出</a>
  </span>
</span>

外層框 btn-list-group

第1個btn是顯示的菜單入口

當鼠標hover下拉框時btn-list-group,顯示下拉按鈕組btn-list-area

btn-list-area絕對定位於btn-list-group,初始時隱藏

.btn-list-group {
    position: relative;
}
.btn-list-area {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
}
.btn-list-group:hover .btn-list-area {
  display: block; 
}
.btn {
    display: inline-block;
    padding: .4em .7em;
    font-size: 14px;
    font-weight: 400;
    color: #6c757d;
    text-align: center;
    line-height: 1.5;
    background-color: #fff;
    border: 1px solid #e9ecef;
    cursor: pointer;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

效果

懸停 新建 編輯 打開 導出 導入 退出