Элементы дочернего элемента выходят за пределы родительского div: Bootstrap

Question

У меня есть два меню начальной загрузки, которые разваливаются при определенных максимальных ширинах, оставляя мне следующие результаты. Я пытаюсь получить элементы подменю на синей навигационной панели для переполнения так же, как и на фиолетовом. Какие-либо предложения?

Синий меню

Пурпурный меню

CSS

Фиолетовый Menu в

nav { 
    background-color: #603180; 
    z-index: 10000; 
    position: relative; 
} 
#toggle { 
    display: none; 
} 
nav ul li { 
    display: inline; 
    list-style: none; 
} 
#cssmenu .menu-main-nav-menu-container { 
    background: #603180; 
    margin: 0; 
    width: auto; 
    padding: 0; 
    line-height: 1; 
    display: block; 
    position: relative; 
} 
#cssmenu .menu-main-nav-menu-container ul .current-menu-item { 
    background-color: #00337e; 
} 
#cssmenu .menu-main-nav-menu-container ul .current-menu-item ul .current-menu-item { 
    background-color: #ffffff; 
} 
#cssmenu .menu-main-nav-menu-container ul li ul .current-menu-item a:link { 
    background-color: #ffffff; 
    font-weight:700; 
} 
#cssmenu .menu-main-nav-menu-container .current-page-parent { 
    background-color: #00337e; 
} 
#cssmenu .menu-main-nav-menu-container .sub-menu .current-page-parent { 
    background-color: #ffffff; 
} 
#cssmenu .menu-main-nav-menu-container ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: block; 
    text-align:left; 
} 
#cssmenu .menu-main-nav-menu-container ul li { 
    margin: 0; 
    padding: 0; 
    display: block; 
    position: relative; 
} 
#cssmenu .menu-main-nav-menu-container ul li a { 
    text-decoration: none; 
    display: block; 
    margin: 0; 
    -webkit-transition: color .2s ease; 
    -moz-transition: color .2s ease; 
    -ms-transition: color .2s ease; 
    -o-transition: color .2s ease; 
    transition: color .2s ease; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
#cssmenu .menu-main-nav-menu-container ul li ul { 
    position: absolute; 
    left: -9999px; 
    top: auto; 
} 
#cssmenu .menu-main-nav-menu-container ul li ul li { 
    max-height: 0; 
    position: absolute; 
    -webkit-transition: max-height 0.4s ease-out; 
    -moz-transition: max-height 0.4s ease-out; 
    -ms-transition: max-height 0.4s ease-out; 
    -o-transition: max-height 0.4s ease-out; 
    transition: max-height 0.4s ease-out; 
    background: #ffffff; 
} 
#cssmenu .menu-main-nav-menu-container.align-right ul li ul li.has-sub:after { 
    right: auto; 
    left: 15px; 
} 
#cssmenu .menu-main-nav-menu-container ul li ul li a { 
    color: #00337e !important; 
    letter-spacing: 0; 
    display: block; 
    padding: 5px 25px !important; 
    background-color: #ffffff; 
} 
#cssmenu .menu-main-nav-menu-container ul li ul li:hover { 
    background-color: #603180; 
    color: #ffffff; 
    -webkit-transition: all 0.15s linear; 
    -moz-transition: all 0.15s linear; 
    -o-transition: all 0.15s linear; 
    -ms-transition: all 0.15s linear; 
    transition: all 0.15s linear; 
} 
#cssmenu .menu-main-nav-menu-container ul li ul li:hover > a, 
#cssmenu .menu-main-nav-menu-container ul li ul li.active > a { 
    color: #ffffff !important; 
} 
#cssmenu .menu-main-nav-menu-container ul li ul li:hover:after, 
#cssmenu .menu-main-nav-menu-container ul li ul li.active:after { 
    background: #4cb6ea; 
} 
#cssmenu .menu-main-nav-menu-container ul li ul li:hover > ul { 
    left: 100%; 
    top: 0; 
} 
#cssmenu .menu-main-nav-menu-container ul li ul li:hover > ul > li { 
    max-height: 72px; 
    position: relative; 
} 
#cssmenu .menu-main-nav-menu-container > ul > li { 
    float: left; 
} 
#cssmenu .menu-main-nav-menu-container.align-center > ul > li { 
    float: none; 
    display: inline-block; 
} 
#cssmenu .menu-main-nav-menu-container.align-center > ul { 
    text-align: center; 
    font-size: 0; 
} 
#cssmenu .menu-main-nav-menu-container.align-center ul ul { 
    text-align: left; 
} 
#cssmenu .menu-main-nav-menu-container.align-right > ul { 
    float: right; 
} 
#cssmenu .menu-main-nav-menu-container.align-right > ul > li:hover > ul { 
    left: auto; 
    right: 0; 
} 
#cssmenu .menu-main-nav-menu-container.align-right ul ul li:hover > ul { 
    right: 100%; 
    left: auto; 
} 
#cssmenu .menu-main-nav-menu-container.align-right ul ul li a { 
    text-align: right; 
} 
#cssmenu .menu-main-nav-menu-container > ul > li:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    width: 100%; 
    height: 0; 
    top: 0; 
    z-index: 0; 
    background: #00337e; 
    -webkit-transition: height .2s; 
    -moz-transition: height .2s; 
    -ms-transition: height .2s; 
    -o-transition: height .2s; 
    transition: height .2s; 
} 
#cssmenu .menu-main-nav-menu-container > ul > li.has-sub > a { 
    padding-right: 40px; 
} 
#cssmenu .menu-main-nav-menu-container > ul > li > a { 
    color: #ffffff; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    font-size: 15px; 
    z-index: 2; 
    position: relative; 
} 
#cssmenu .menu-main-nav-menu-container > ul > li:hover:after, 
#cssmenu .menu-main-nav-menu-container > ul > li.active:after { 
    height: 100%; 
}  
#cssmenu .menu-main-nav-menu-container > ul > li:hover > a, 
#cssmenu .menu-main-nav-menu-container > ul > li.active > a { 
    color: #ffffff; 
} 
#cssmenu .menu-main-nav-menu-container > ul > li:hover > a:after, 
#cssmenu .menu-main-nav-menu-container > ul > li.active > a:after { 
    background: #ffffff; 
} 
#cssmenu .menu-main-nav-menu-container > ul > li:hover > a:before, 
#cssmenu .menu-main-nav-menu-container > ul > li.active > a:before { 
    border-top-color: #ffffff; 
} 
#cssmenu .menu-main-nav-menu-container > ul > li:hover > ul { 
    left: 0; 
    z-index: 999; 
} 
#cssmenu .menu-main-nav-menu-container > ul > li:hover > ul > li { 
    max-height: 72px; 
    position: relative; 
} 
#cssmenu .menu-main-nav-menu-container #menu-button { 
    display: none; 
} 
#cssmenu .menu-main-nav-menu-container > ul > li > a { 
    display: block; 
} 
#cssmenu .menu-main-nav-menu-container > ul > li { 
    width: auto; 
} 
#cssmenu .menu-main-nav-menu-container > ul > li > ul { 
    width: 210px; 
    display: block; 
    box-shadow: 0 0 5px 2px rgba(0,0,0,.35); 
} 
#cssmenu .menu-main-nav-menu-container > ul > li > ul > li { 
    width: 210px; 
    display: block; 
} 
nav #cssmenu .menu-main-nav-menu-container ul li a:link { 
    font-size: 1em; 
    font-weight: 400; 
    color: #ffffff; 
    padding: 12px 26px; 
} 
nav #cssmenu .menu-main-nav-menu-container ul li a:hover { 
    background-color: #00337e; 
    -webkit-transition: all 0.15s linear; 
    -moz-transition: all 0.15s linear; 
    -o-transition: all 0.15s linear; 
    -ms-transition: all 0.15s linear; 
    transition: all 0.15s linear; 
} 
nav #cssmenu .menu-main-nav-menu-container ul li ul li a:hover { 
    background-color: #603180; 
    color: #ffffff; 
    -webkit-transition: all 0.15s linear; 
    -moz-transition: all 0.15s linear; 
    -o-transition: all 0.15s linear; 
    -ms-transition: all 0.15s linear; 
    transition: all 0.15s linear; 
} 

@media (max-width: 979px) { 
    nav { 
     opacity: 0.97; 
    } 
    #toggle { 
     display: block; 
     color: #ffffff; 
     width: 100%; 
     position: relative; 
     margin-bottom: 15px; 
    } 
    #toggle h6 { 
     font-size: 1.2857142857142858em; 
     padding-bottom: 10px; 
    } 
    #toggle:after { 
     top: 80%; 
     left: 50%; 
     border: solid transparent; 
     content: " "; 
     height: 0; 
     width: 0; 
     position: absolute; 
     pointer-events: none; 
     border-color: rgba(255, 255, 255, 0); 
     border-top-color: #ffffff; 
     border-width: 11px; 
     margin-left: -11px; 
    } 
    nav #cssmenu { 
     display: none; 
    } 
    nav h6 { 
     color: #ffffff; 
    } 
    nav #cssmenu .menu-main-nav-menu-container ul li ul { 
     z-index: 1000; 
    } 
    nav #cssmenu .menu-main-nav-menu-container ul li { 
     display: block; 
     clear: both; 
     text-align: center; 
     width: 100%; 
    } 

CSS Синий Menu в

nav .container { 
    width: 100%; 
    font-weight: bold; 
} 
.navbar { 
    border-radius: 0px; 
    margin-bottom: 0px; 
} 
.navbar .nav li a { 
    -webkit-transition: all ease .3s; 
    -moz-transition: all ease .3s; 
    -o-transition: all ease .3s; 
    transition: all ease .3s; 
} 
.dropdown-menu { 
    border-radius: 0px; 
    padding: 0px; 
} 
.dropdown:hover .dropdown-menu, 
.dropdown:focus .dropdown-menu { /*allows hover dropdown*/ 
    display: block; 
} 
/*navbar .navbar-nav {    == Comment out two lines == 
    display: inline-block; 
    float: none; 
} 

.navbar .navbar-collapse { 
    text-align: center; 
}         == to center menu items ==*/ 

.navbar-default {     /*navbar */ 
    background-color: #004C99; 
    border-color: #004C99; 
    z-index: 10; 
} 
.navbar-default .navbar-brand {  /*Company/Port name*/ 
    color: #fff; 
    font-weight: 700; 
    text-transform: capitalize; 
} 
.navbar-default .navbar-brand:focus, 
.navbar-default .navbar-brand:hover { /*Company/Port name hover*/ 
    color: #fff; 
} 
.navbar-default .navbar-nav li a { /*navbar links*/ 
    color: #fff; 
} 
.navbar-default .navbar-nav li a:focus, 
.navbar-default .navbar-nav li a:hover { /*navbar links hover*/ 
    color: #fff; 
    background-color: #00337e; 
    transition: color 0.33s ease-in-out; 
} 
.dropdown-menu li a {    /*Dropdown list*/ 
    color: #00337e !important; 
    width: 170px; 
    padding: 5px 25px; 
    text-transform: capitalize; 
} 
.dropdown-menu li a:hover {   /*Dropdown list hover*/ 
    color: #fff !important; 
} 
.navbar-default .navbar-nav>.open>a, 
.navbar-default .navbar-nav>.open>a:focus, 
.navbar-default .navbar-nav>.open>a:hover { /*Dropdown open button*/ 
    background-color: #00337e; 
    color: #fff; 
} 
.navbar-collapse { 
    padding: 0px; 
} 
.dropdown-submenu { 
    position: relative; 
} 
.dropdown-submenu>.dropdown-menu { 
    top: 0; 
    left: 100%; 
    margin-top: 0px; 
    margin-left: 0px; 
    display: none !important; 
    max-height: 300px; 
    overflow-y: auto; 
    overflow-x: hidden; 
} 
.dropdown-submenu:hover>.dropdown-menu { 
    display: block !important; 
} 
.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: 4px; 
    margin-right: -10px; 
} 
.dropdown-submenu:hover>a:after { 
    border-left-color: #fff; 
} 
.dropdown-submenu.pull-left { 
    float: none; 
} 
button.navbar-toggle { 
    padding-bottom: 9px !important; 
} 

Answer 1

вы будете нуждаться, чтобы удалить отступы и ширину ограничений на ваших навигационных родительских элементов. Как вы можете видеть в этой скрипке, дети расширяют ширину навигационной системы со всем размером 100% и максимальной шириной на родительском элементе (если это необходимо), чтобы ограничить меню.

http://jsfiddle.net/calebswank/1mb4n8db/

nav { 
width: 100%; 
max-width: 600px; 
background: rgba(0, 0, 0, .1); 
padding: 0; 

}