下拉菜单

用法

注: 可通过改写li的样式width/margin-left/margin-right灵活控制li的宽度和间隔，这里必须要用百分比且满足条件width(%)+margin-left(%)+margin-right(%)=100%

示例

HTML

<ul class="baie-dropdown">
    <li class="baie-active">
        <a href="javascript:;">全部</a>
    </li>
    <li>
        <a href="javascript:;">体现</a>
    </li>
    <li>
        <a href="javascript:;">奖金</a>
    </li>
    <li>
        <a href="javascript:;">收货款</a>
    </li>
    <li>
        <a href="javascript:;">付贷款</a>
    </li>
    <li>
        <a href="javascript:;">运费</a>
    </li>
    <li>
        <a href="javascript:;">手续费</a>
    </li>
    <li>
        <a href="javascript:;">佣金</a>
    </li>
    <li>
        <a href="javascript:;">拓展奖</a>
    </li>
    <li>
        <a href="javascript:;">退款</a>
    </li>
    <li>
        <a href="javascript:;">代付</a>
    </li>
    <li>
        <a href="javascript:;">未结算</a>
    </li>
</ul>

CSS

.baie-dropdown {
    width: 100%;
    list-style: none;
    background-color: #fff;
}
.baie-dropdown li {
    float: left;
    margin: 0 1% .30rem;
    width: 23.5%;
    height: .60rem;
    line-height: .60rem;
    box-sizing: border-box;
}
.baie-dropdown li:nth-child(4n+1) {
    margin-left: 0;
}
.baie-dropdown li:nth-child(4n+4) {
    margin-right: 0;
}
.baie-dropdown li a {
    display: block;
    background-color: #fff;
    border: 1px solid #9e9e9e;
    border-radius: .10rem;
    font-size: .30rem;
    text-align: center;
    text-decoration: none;
    color: #161616;
    overflow: hidden;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.baie-dropdown li.active a {
    border: 1px solid #ea5504;
    color: #ea5504;
}
.baie-dropdown li a:active {
    background-color: #f8f8f8;
}
.baie-dropdown_big-space li { /* 下拉菜单 间隔变宽 */
    margin-left:2%;
    margin-right:2%;
    width: 22%;
}