HTML和CSS实现鼠标下拉菜单

简介： HTML和CSS实现鼠标下拉菜单

实现原理

将一级菜单和二级菜单置于同一个DIV，二级菜单默认显示为none，鼠标滑过，调用:hover，显示。

HTML

    <span class="btn-list-group">
        <a class="menuBtn"><img src="images/headimg.png" alt="会员"></a>
    <span class="btn-list-area"> <a class="menuBtn subMenu">信息管理</a> <a class="menuBtn subMenu">密码修改</a> <a class="menuBtn subMenu" href="index.html">退出系统</a></span>
    </span>

CSS

/*下拉菜单*/
.btn-list-group {
    width: 15%;
    float: right;
    padding-top: 25px;
    padding-right: 50px;
    text-align: right;
    cursor: pointer;
}

.btn-list-area {
    display: none;
    position: absolute;
    background: #fff;
    border-radius: 5px;
    width: 100px;
    z-index: 9999;
    right: 20px;
}

.btn-list-group:hover .btn-list-area {
    display: block
}

.menuBtn {
    display: inline-block;
    padding: 5px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(108, 117, 125, 1);
    text-align: center;
    line-height: 1.5;
    cursor: pointer;
}

.subMenu {
    width: 100px;
}

lockdatav Done!