鼠标悬停出菜单
鼠标指向菜单,出现二级菜单,移动到二级菜单上点击
这个功能实现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; }
效果