入れ子要素の幅が親要素を超える方法

Question

ナビゲーションバーにドロップダウンメニューがあり、ドロップダウン部分がドロップダウンリンクの幅を超えるようにします。現在、それはそれによって制限されているようで、これを達成する方法を理解することはできません。

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

Answer 1

問題であり、そのメニューのdivは、メニューのdivはのサイズに拘束されることを意味ナビゲーションバー、内部にネストされているため、その包括的なnavbar。 メニューdivをnavbar divの外に移動する最も簡単な方法です。

あなたは正しくナビゲーションバーとdiv要素を配置するスタイルを追加することができます。