子元素扩展到父div之外：Bootstrap

时间：2015-11-10 16:57:52

标签： html css twitter-bootstrap

我有两个自举菜单，在某些最大宽度处折叠，留下了以下结果。我试图让蓝色导航栏上的子菜单项溢出，就像它们在紫色上一样。有什么建议？

蓝色菜单

Blue menu

紫色菜单

Purple menu

紫色菜单的CSS 

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 

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

1 个答案:

答案 0 :(得分：0)

您需要删除导航父元素的填充和宽度限制。正如你可以在这个小提琴中看到的那样，孩子们会扩展导航的宽度，所有内容都是100％宽度，父元素上的最大宽度（如果你需要的话）来约束菜单。

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

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

}

相关问题
最新问题