实现原理
将一级菜单和二级菜单置于同一个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!