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?

score 1 · Answer 1 · answered May 21 '15 at 08:17

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.

answered May 21 '15 at 08:17

ANR Upgraded Version

857
16
39

I am using chrome. I don't see "action .... " text displayed in your working example. – Rocky May 21 '15 at 09:26
http://stackoverflow.com/a/18024991/3464552 refer this link we had already discussion on submenus @user3564816 – ANR Upgraded Version May 21 '15 at 10:09

Bootstrap navigation bar menu item overflow

1 Answers1