noel1992 / button-dropdown

按钮下拉菜单样式

ButtonDropdown

---

按钮下拉菜单样式。

---

演示

<a class="ui-button ui-button-lorange ui-dbutton ui-dbutton-orange">
    <span class="ui-dbutton-self">下拉菜单</span>
    <i class="ui-dbutton-arrow iconfont" title="下三角形">&#xF03C;</i>
</a>
<a class="ui-button ui-button-morange ui-dbutton ui-dbutton-orange">
    <span class="ui-dbutton-self">下拉菜单</span>
    <i class="ui-dbutton-arrow iconfont" title="下三角形">&#xF03C;</i>
</a>
<a class="ui-button ui-button-sorange ui-dbutton ui-dbutton-orange">
    <span class="ui-dbutton-self">下拉菜单</span>
    <i class="ui-dbutton-arrow iconfont" title="下三角形">&#xF03C;</i>
</a>

<a class="ui-button ui-button-lwhite ui-dbutton ui-dbutton-white">
    <span class="ui-dbutton-self">下拉菜单</span>
    <i class="ui-dbutton-arrow iconfont" title="下三角形">&#xF03C;</i>
</a>
<a class="ui-button ui-button-mwhite ui-dbutton ui-dbutton-white">
    <span class="ui-dbutton-self">下拉菜单</span>
    <i class="ui-dbutton-arrow iconfont" title="下三角形">&#xF03C;</i>
</a>
<a class="ui-button ui-button-swhite ui-dbutton ui-dbutton-white">
    <span class="ui-dbutton-self">下拉菜单</span>
    <i class="ui-dbutton-arrow iconfont" title="下三角形">&#xF03C;</i>
</a>

<style> .ui-button-dropdown { height: 120px; } </style>

<div class="ui-button-dropdown">
    <a class="ui-button ui-button-lorange ui-dbutton ui-dbutton-orange">
        <span class="ui-dbutton-self">下拉菜单</span>
        <i class="ui-dbutton-arrow iconfont" title="下三角形">&#xF03C;</i>
    </a>
    <ul class="ui-button-dropdown-large">
        <li class="ui-button-dropdown-item">
            <a href="#">设置代扣</a>
        </li>
        <li class="ui-button-dropdown-item">
            <a href="#">标为已缴</a>
        </li>   
    </ul>
</div>

<div class="ui-button-dropdown">
    <a class="ui-button ui-button-morange ui-dbutton ui-dbutton-orange">
        <span class="ui-dbutton-self">下拉菜单</span>
        <i class="ui-dbutton-arrow iconfont" title="下三角形">&#xF03C;</i>
    </a>
    <ul class="ui-button-dropdown-middle">
        <li class="ui-button-dropdown-item">
            <a href="#">设置代扣</a>
        </li>
        <li class="ui-button-dropdown-item">
            <a href="#">标为已缴</a>
        </li>   
    </ul>
</div>

<div class="ui-button-dropdown">
    <a class="ui-button ui-button-sorange ui-dbutton ui-dbutton-orange">
        <span class="ui-dbutton-self">下拉菜单</span>
        <i class="ui-dbutton-arrow iconfont" title="下三角形">&#xF03C;</i>
    </a>
    <ul class="ui-button-dropdown-small">
        <li class="ui-button-dropdown-item">
            <a href="#">设置代扣</a>
        </li>
        <li class="ui-button-dropdown-item">
            <a href="#">标为已缴</a>
        </li>   
    </ul>
</div>