jquery - 如何将下拉子菜单移动到顶部

Question

我想在 Bootstrap 中将子菜单移动到顶部(等于 super 菜单)。现在它看起来像这样

我想让它看起来像这样

我试过改变位置和顶部但没有帮助

我现在的代码如下

<li id = "category-filter" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings</a>
        <ul class="dropdown-menu">
            <li><a href="#">Login</a></li>
            <li class="dropdown-submenu">
            <a tabindex="-1" href="#">More options</a>
            <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">Second level</a></li>
                <li class="dropdown-submenu">
                <a href="#">More..</a>
                <ul class="dropdown-menu">
                    <li><a href="#">3rd level</a></li>
                    <li><a href="#">3rd level</a></li>
                </ul>
            </li>
            <li><a href="#">Second level</a></li>
            <li><a href="#">Second level</a></li>
            </ul>
        </li>
        <li><a href="#">Register</a></li>
        <li class="divider"></li>
        <li><a href="#">Logout</a></li>
    </ul>
</li>

Answer 1

您可能需要更改 position:absolute 的引用父级，试试这个:

.dropdown-submenu {
    position:static;
}
.dropdown-submenu>.dropdown-menu {
    margin:0;
}

检查这个 Demo