Bootstrap navigation bar menu item overflow

Question

I am using Bootstrap and bootsnip's css http://bootsnipp.com/user/snippets/rVnKg in navigation bar.

Here is JSFiddle link - http://jsfiddle.net/ask1987/8xc7fk43/

Please check the JSFiddle link

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">        
        <div class="collapse navbar-collapse">            
            <ul class="nav navbar-nav navbar-right">                
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1<b class="caret"></b></a>
                    <ul class="dropdown-menu multi-level">
                        <li class="dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">ActionActi onActionA ction</a></li>
                            </ul>
                        </li>      
                    </ul>
                </li>
        </div>
    </div>
</div>

The problem is menu items are overflowing when navbar-right class is used on ul element.

If it is set to left, navigation bar works just fine.

Can someone help with this issue?

Answer 1

Remove this class

class="collapse navbar-collapse"

Any how it is used to Collect the nav links, forms, and other content for toggling ,where you are not using it any where.

Working Example and refer Bootstrap Navabar for more details.