how to move dropdown-submenu to the top

Question

i want to move a sub-menu to the top (equal to super menu) in bootstrap. Now the it looks like this

i want to make it look like this

i tried changing position and top but its not helping

my code now is as follow

<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

Add the following css code:

.nav ul li ul li ul {
  position: absolute;
  top: -26px !important;
}

This should do it

Answer 2

You may need to change the referent parent for the position:absolute, try this:

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

Check this Demo