Bootstrap class dropdown-menu dropdown-menu-right is not working on self-defined sub-menu's

Question

In related to my previous question (Dropdown submenu on bootstrap is not working) I'm currently building a sub-menu for a sub-menu of an li dropdown. So it means that it is nested. Under the banking menu there is transaction dropdown menu and below the transaction dropdown there is a menu for different type of transactions. By the way, I've successfully created it BUT the submenu of the "transaction" module appears on the front of the transaction menu during hover, blocking the parent menu which is the transaction. How can I avoid it and place it on the right side of the transaction menu during hover? Anyways, I've done using "dropdown-menu dropdown-menu-right" but it doesnt change the output of the program. I think there is something wrong with my CSS.

HTML CODE:

    <li class='dropdown'><a id = 'dLabel' class='dropdown-toggle active' data-toggle='dropdown' href='#'><img src = 'images/forbank.png' height = 35 width = 35>Banking<span class='caret'></span></a>
        <ul class='dropdown-menu' role='menu' aria-labelledby='dropdownMenu'>
            <li class = 'dropdown-submenu'>
            <a  tabindex = '-1' href='#'><span class = 'glyphicon glyphicon-cog'> </span>  Transaction </a>
                <ul class='dropdown-menu dropdown-menu-right' aria-labelledby='dLabel'>
                    <li><a tabindex='-1' href='#'> Withdrawal / Deposit </a></li>
                    <li><a tabindex='-1' href='#'> Fixed Deposit </a></li>
                </ul>
            </li>
            <li role='separator' class='divider'></li>
            <li><a href='#'><span class='glyphicon glyphicon-list-alt'> </span> Summaries </a></li>
            <li><a href='#'><span class='glyphicon glyphicon-wrench'> </span>  Settings </a></li>
        </ul>
    </li>

CSS CODE:

.dropdown-submenu {
    position: relative;
}

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

.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;
}

Answer 1

For anyone who stumbles upon this in the future. Refer to https://github.com/twbs/bootstrap/issues/23553.

It seems bootstrap4's dropdown-menu-right is not working outside navbars. Jipexu's hack worked for me :

.dropdown-menu-right {
    right: 0;
    left: auto;
}

Answer 2

Try this css

/* dropdown open on right side of the menu*/
.dropdown-menu {
  top: 0;
  left: 100%;
}