如何讓嵌套的元素寬度超過父元素

在我的導航欄上我有一個下拉菜單，我希望下拉部分超出下拉鍊接的寬度。目前它似乎受到它的限制，我無法想出如何實現這一點。如何讓嵌套的元素寬度超過父元素

HTML

<nav class="site-nav"> 
    <div class="menu-primary-menu-links-container"> 
     <ul id="menu-primary-menu-links" class="menu"> 
     <li id="menu-item-36" class="standard-nav-link menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="http://localhost/testsite/contact/">Contact</a></li> 
     <li id="menu-item-37" class="standard-nav-link menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="http://localhost/testsite/tuition/">Tuition</a></li> 
     <li id="menu-item-38" class="standard-nav-link menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="http://localhost/testsite/blog/">Blog</a></li> 
     <li id="menu-item-107" class="standard-nav-link menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children current-menu-item current_page_item menu-item-107"> 
      <a href="http://localhost/testsite/shop/">Gallery</a> 
      <ul class="sub-menu"> 
       <li id="menu-item-119" class="dropdown-nav-link menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-119"><a href="http://localhost/testsite/product-category/animals/" class="nav-link-a">Animals</a></li> 
       <li id="menu-item-120" class="dropdown-nav-link menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-120"><a href="http://localhost/testsite/product-category/contemporary-space-images/" class="nav-link-a">Contemporary Space Images</a></li> 
      </ul> 
     </li> 
     <li id="menu-item-42" class="standard-nav-link menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-42"><a href="http://localhost/testsite/">Home</a></li> 
     </ul> 
    </div> 
</nav>

CSS

/* Navigation Menus */ 
.site-nav ul { 
    font-family: LibreCaslonDisplay; 
    font-size: 18px; 
    margin: 0; 
    padding: 0; 
} 

.site-nav ul:before, .site-nav ul:after { content: ""; display: table; } 
.site-nav ul:after {clear: both;} 
.site-nav ul { *zoom: 1; } 

.standard-nav-link { 
    list-style: none; 
    float: right; 
    background-color: #ebebeb; 
    margin-left: 20px; 
} 
.nav-link-a { 
    color: black; 
    display: block; 
    text-decoration: none; 
    width: 85px; 
    height: 75px; 
    text-align: center; 
    line-height: 120px; 
    font-weight: 300; 
} 

.nav-link-a:hover { 
    background-color: #b0a59b; 
    color: white; 
} 

#header-logo { 
    display: block; 
    margin-top: 20px; 
    width: 220px; 
} 

header nav ul li.current-menu-item a:link, 
header nav ul li.current-menu-item a:visited { 
    background-color: #b0a59b; 
    color: #f0f0f0; 
} 

/* Dropdown Menu */ 

.sub-menu { 
    position: absolute; 
    display: none; 
    z-index: 1; 
    background-color: #b0a59b; 
} 
.sub-menu li { 
    list-style: none; 
    padding-top: 10px; 
} 
.sub-menu a:hover { 
    color: #ebebeb; 
} 
.sub-menu a{ 
    text-decoration: none; 
    width: 400px; 
} 

.standard-nav-link:hover .sub-menu { 
    display: block; 
    width: 85px; 
}

來源

2017-02-09 eZ_Harry

的問題是，因爲菜單DIV嵌套在導航欄，這意味着，菜單股利是由大小的約束內其包含的導航欄。最簡單的方法是將菜單div移到導航欄div之外。

您可以添加樣式正確定位導航欄和股利。

來源

2017-02-09 12:21:20 JordanH

如何讓嵌套的元素寬度超過父元素

回答

相關問題