demo-HC-下拉菜单

下拉菜单：点击出现下拉列表（未实现js交互）

1.点击按钮+小三角图标2.下拉列表

html:

    <div>        <button>            菜单            <span class="icon-triangle"></span>        </button>        <ul>            <li><a href="#">首页</a></li>            <li><a href="#">个人中心</a></li>        </ul>    </div>

css:

button{    padding: 6px 11px;    background-color: #fff;    font-weight: 400;    font-size: 14px;    line-height: 1.2;    text-align: center;    user-select: none;    cursor: pointer;    border:1px solid #ccc;    border-radius: 4px;}/*倒三角*/.icon-triangle{    display: inline-block;    vertical-align: middle;    width: 0;    height: 0;    border-top: 4px solid #ccc;    border-right: 4px solid transparent;    border-left: 4px solid transparent;}ul{    position: absolute;    margin-top: 2px;    text-align: left;    border:1px solid #ccc;    border-radius: 4px;    box-shadow: 2px 2px 7px rgba(0,0,0,.375);    overflow: hidden;}ul>li:hover{    background-color: #999ddd;}ul>li>a{    display: block;    padding:6px 20px;}