无法保持对齐UI Bootstrap下拉子菜单

Question

我在尝试将子菜单与UI Bootstrap uib-dropdown控件中对齐时遇到问题。由于我的下拉菜单太靠近页面的右侧，我需要从左侧推出子菜单，但是，默认情况下它显示在父项下方：

如果我将pull-left添加到我的子菜单，它会显示在左侧，但仍在下方：

当我尝试访问子菜单时，它会消失。我需要它出现在左侧（直接在父菜单项旁边）。

我的代码如下：

<div uib-dropdown>
    <a id="options" href class="panel-tools-configure" uib-dropdown-toggle uib-tooltip="Options"><span class="glyphicon glyphicon-cog"></span></a>
        <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
            <li role="menuitem"><a href><span class="glyphicon glyphicon-th"></span> Gallery View</a></li>
            <li role="menuitem"><a href><span class="glyphicon glyphicon-list"></span> List View</a></li>
            <li class="dropdown-header">Sorting</li>
            <li class="dropdown-submenu pull-left">
                <a href="#">Sort By: {{ sortBy }}</a>
                <ul class="dropdown-menu" uib-dropdown-menu>
                    <li role="menuitem"><a href="#">Site ID</a></li>
                    <li role="menuitem"><a href="#">Site Name</a></li>
                </ul>
            </li>
        </ul>
</div>

我的CSS代码：

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}