动态菜单，自动对齐

描述：类似微信公众号菜单样式，子菜单动态生成数量不固定，样式如下：

 

html

    <nav class="wx_menu">
        <dl>
            <dt>短信/资费</dt>
            <dd>
                <ul class="dropdown-menu">
                    <li><a href="/wx/m/sms">短信</a></li>
                    <li><a href="/wx/m/data">流量</a></li>
                    <li><a href="/wx/m/price">资费</a></li>
                    <li><a href="/wx/m/partner">合伙人</a></li>
                </ul>
            </dd>
        </dl>
        <dl>
            <dt>
                推广/兑换
            </dt>
            <dd>
                <ul class="dropdown-menu">
                    <li><a href="/wx/m/partner_plan">积分介绍</a></li>
                    <li><a href="/WX/m/Extension/@ViewBag.MySharedInfo">推广会员</a></li>
                    <li><a href="/wx/wx_jfdd/shop">兑换礼品</a></li>
                    <li><a href="/wx/WX_FXJL/exshare">兑换积分</a></li>
                </ul>
            </dd>
        </dl>
        <dl>
            <dt>我的</dt>
            <dd>
                <ul class="dropdown-menu">
                    <li><a href="/wx/WX_JFJL/myscore">积分</a></li>
                    <li><a href="/wx/WX_FXJL/myshare">分享值</a></li>
                    <li><a href="/WX/WX_HHR/mymember">会员</a></li>
                    <li><a href="/WX/WX_HHR/myinfo">资料</a></li>
                    <li><a href="/WX/WX_HHR/myaddress">收件地址</a></li>
                </ul>
            </dd>
        </dl>
    </nav>

css（less）

.wx_menu {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 200000;
    background-color: transparent;
    text-align: center;

    dl {
        background-color: #fff;
        border: solid 1px #ddd9d9;
        text-align: center;
        padding: 10px 0;
        margin-bottom: 4px;
        position: relative;
        display: inline-block;
        width: 30%;

        dd {
            display: none;
            width: 100%;
            margin: 0 0 6px 0;
            padding: 0;
            transition: 1s;
            animation: flipInX,.4s,1;
            position: absolute;
            top: auto;
            bottom: 100%;
        }
    }

    ul {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        box-shadow: 0,2px,4px,#000;

        li {
            display: block;
            padding: 12px 0;
            text-align: center;
            background-color: #fff;
            width: 100%;
            box-sizing: border-box;
            border: 1px solid #e0e0e0;
        }

        li:not(:last-child) {
            border-bottom: none;
        }
    }
}

js

$(function () {
    $(".wx_menu").find("dt").click(function () {
        var _obj = $(this);
        if (_obj.next("dd").css("display") == "block") {
            _obj.next("dd").css({ "display": "none" });
        } else {
            _obj.next("dd").css({ "display": "block" }).parent().siblings().find("dd").hide();
        }
    });
});

本例是底部对齐，关键样式是： top: auto;bottom: 100%;