子下拉菜单没有朝正确的方向发展

Question

我正在创建一个子下拉列表，我想让它在正确的方向打开，但它在相同的位置打开。当我使用left: 100%时，它向左打开并正常工作，但在使用正确的方向时却没有。

以下是代码：

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
        Action
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" style="margin-left:-70px;">
        <li class="dropdown-submenu">
            <a class="test" tabindex="-1" href="#">
                <i class="fa fa-hand-o-left" aria-hidden="true" style="padding-right:10px;"></i>
                Edit-file
            </a>
            <ul class="dropdown-menu" style="top: 0px;Right:100%;text-align:right;">
                <li>action</li>
                <li> sub action</li>
            </ul>
        </li>
    </ul>
</div>

下拉菜单未按正确方向打开。

<style>right: 100%</style>