位置指定されたアイテムによってmax-widthが無視されないようにするにはどうすればよいですか？

Question

特定の要素を配置する必要があるホバーメニューがありますが、テキストを最大幅まで拡大することができません。ちょうどそれ自身を最小幅に設定します。

私は例としてmax-widthを非常に大きなものに設定しましたが、Pagesサブメニューで無視されていることがわかります。

liで相対位置を削除したようですが、テキストは折り返して表示されますが、それは自分のメニューに影響します。

ul { 
 
    padding-left: 0; 
 
} 
 

 
.toggle { 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
} 
 

 
#shop-navigation .sub-menu, 
 
#shop-navigation, 
 
#shop-navigation [type="checkbox"]:checked~.sub-menu-toggle span, 
 
.hidden-xs-up { 
 
    display: none; 
 
} 
 

 
#shop-navigation .menu li { 
 
    position: relative; 
 
} 
 

 
#shop-navigation a { 
 
    display: block; 
 
    padding: 0.5rem 4rem 0.5rem 15px; 
 
    margin: 0 -15px; 
 
} 
 

 
#shop-navigation .menu .sub-menu-toggle { 
 
    padding: 0.5rem; 
 
    width: 3rem; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    border-left: 1px solid rgba(0, 0, 0, 0.1); 
 
    text-align: center; 
 
    height: 100%; 
 
} 
 

 
#shop-navigation .sub-menu a { 
 
    background: #e8e8e8; 
 
    padding-left: 30px; 
 
} 
 

 
#shop-navigation .sub-menu ul a { 
 
    padding-left: 45px; 
 
} 
 

 
#shop-navigation [type="checkbox"]:checked~.sub-menu { 
 
    display: block; 
 
} 
 

 
#shop-navigation [type="checkbox"]:checked~.sub-menu-toggle:before { 
 
    content: "-"; 
 
} 
 

 
@media (min-width: 768px) { 
 
    #shop-navigation a { 
 
    margin-left: -30px; 
 
    margin-right: -30px; 
 
    } 
 
    #shop-navigation a { 
 
    padding-left: 30px; 
 
    padding-right: 4rem; 
 
    } 
 
    #shop-navigation .menu .sub-menu-toggle { 
 
    width: 4rem; 
 
    } 
 
    #shop-navigation .sub-menu a { 
 
    padding-left: 45px; 
 
    } 
 
    #shop-navigation .sub-menu ul a { 
 
    padding-left: 60px; 
 
    } 
 
} 
 

 
#shop-navigation .sub-menu-toggle, 
 
#shop-navigation [type="checkbox"]:checked~.sub-menu { 
 
    display: none; 
 
} 
 

 
#shop-navigation { 
 
    position: relative; 
 
    width: 100%; 
 
    min-height: 1px; 
 
    padding-right: 30px; 
 
    padding-left: 30px; 
 
} 
 

 
#shop-navigation { 
 
    -webkit-box-flex: 0; 
 
    -webkit-flex: 0 0 100%; 
 
    -ms-flex: 0 0 100%; 
 
    flex: 0 0 100%; 
 
    max-width: 100%; 
 
} 
 

 
#shop-navigation li { 
 
    display: inline-block; 
 
} 
 

 
#shop-navigation { 
 
    display: block; 
 
    text-align: center; 
 
    padding-top: 1.5rem; 
 
    z-index: 2020; 
 
} 
 

 
#shop-navigation .menu { 
 
    margin-bottom: 0.5rem; 
 
} 
 

 
#shop-navigation li { 
 
    margin: 0 0.5rem 1rem; 
 
} 
 

 
#shop-navigation a { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#shop-navigation .menu-item-has-children>a:first-child::after { 
 
    content: " \f107"; 
 
    color: #4e9197; 
 
} 
 

 
#shop-navigation .sub-menu .menu-item-has-children>a:first-child::after { 
 
    content: " \f105"; 
 
    position: absolute; 
 
    right: 1rem; 
 
    line-height: 1.5; 
 
} 
 

 
#shop-navigation .sub-menu .sub-menu .menu-item-has-children>a:first-child::after { 
 
    content: ""; 
 
} 
 

 
#shop-navigation .menu-item-has-children:hover>.sub-menu { 
 
    display: block; 
 
    position: absolute; 
 
    z-index: 2030; 
 
} 
 

 
#shop-navigation .sub-menu { 
 
    background: #ffffff; 
 
    border: 1px solid rgba(0, 0, 0, 0.15); 
 
    -webkit-background-clip: padding-box; 
 
    background-clip: padding-box; 
 
    -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175); 
 
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175); 
 
    cursor: pointer; 
 
    border-radius: 0.25rem; 
 
} 
 

 
#shop-navigation .sub-menu .sub-menu { 
 
    left: 100%; 
 
    top: -1px; 
 
    margin: -0.25rem 0 0 -0.25rem; 
 
} 
 

 
#shop-navigation .sub-menu>li:first-child>.sub-menu { 
 
    margin-top: 0; 
 
} 
 

 
#shop-navigation .sub-menu li { 
 
    background: #ffffff; 
 
    min-width: 10rem; 
 
    max-width: 200rem; 
 
    margin: 0 0 1px; 
 
    text-align: left; 
 
    display: block; 
 
    border-radius: 0.25rem; 
 
} 
 

 
#shop-navigation .sub-menu a { 
 
    background: transparent; 
 
    padding: 0.25rem 1rem; 
 
} 
 

 
#shop-navigation .sub-menu li:first-child>a { 
 
    padding-top: 0.5rem; 
 
} 
 

 
#shop-navigation .sub-menu li:last-child>a { 
 
    padding-bottom: 0.5rem; 
 
} 
 

 
#shop-navigation .sub-menu .menu-item-has-children a { 
 
    padding-right: 2.25rem; 
 
    padding-left: 1rem; 
 
    position: relative; 
 
}

<nav id="shop-navigation" class="main-navigation text-nohyphen" role="navigation"> 
 
    <ul id="shop-menu" class="menu"> 
 
    <li id="menu-item-2131" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-2131 menu-item-home"><a href="#">Home</a></li> 
 
    <li id="menu-item-1051" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1051 menu-item-depth"><a href="#">Depth</a><input id="expand-1051" class="hidden-xs-up" type="checkbox"><a class="toggle sub-menu-toggle" href="#" data-for="expand-1051" aria-label="Expand sub-menu"><span>+</span></a> 
 
     <ul class="sub-menu"> 
 
     <li id="menu-item-1052" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1052 menu-item-level-01"><a href="#">Level 01</a><input id="expand-1052" class="hidden-xs-up" type="checkbox"><a class="toggle sub-menu-toggle" href="#" data-for="expand-1052" aria-label="Expand sub-menu"><span>+</span></a> 
 
      <ul class="sub-menu"> 
 
      <li id="menu-item-1053" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1053 menu-item-level-02"><a href="#">Level 02</a><input id="expand-1053" class="hidden-xs-up" type="checkbox"><a class="toggle sub-menu-toggle" href="#" data-for="expand-1053" aria-label="Expand sub-menu"><span>+</span></a></li> 
 
      </ul> 
 
     </li> 
 
     <li id="menu-item-1937" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1937 menu-item-level-01a"><a href="#">Level 01a</a><input id="expand-1937" class="hidden-xs-up" type="checkbox"><a class="toggle sub-menu-toggle" href="#" data-for="expand-1937" aria-label="Expand sub-menu"><span>+</span></a> 
 
      <ul class="sub-menu"> 
 
      <li id="menu-item-1938" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1938 menu-item-level-02"><a href="#">Level 02</a></li> 
 
      <li id="menu-item-1940" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1940 menu-item-level-02a"><a href="#">Level 02a</a></li> 
 
      </ul> 
 
     </li> 
 
     <li id="menu-item-1939" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1939 menu-item-level-01b"><a href="#">Level 01b</a></li> 
 
     </ul> 
 
    </li> 
 
    <li id="menu-item-1046" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1046 menu-item-pages"><a href="#">Pages</a><input id="expand-1046" class="hidden-xs-up" type="checkbox"><a class="toggle sub-menu-toggle" href="#" data-for="expand-1046" aria-label="Expand sub-menu"><span>+</span></a> 
 
     <ul class="sub-menu" style="right: auto;"> 
 
     <li id="menu-item-1695" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1695 menu-item-page-image-alignment"><a href="#">Page Image Alignment</a></li> 
 
     <li id="menu-item-1693" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1693 menu-item-page-image-alignment"><a href="#">Page Image Alignment</a></li> 
 
     <li id="menu-item-1696" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1696 menu-item-page-markup-and-formatting"><a href="#">Page Markup And Formatting</a></li> 
 
     <li id="menu-item-1694" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1694 menu-item-page-markup-and-formatting"><a href="#">Page Markup And Formatting</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

あなたがmax-width相対的に位置決めするための要素（li S）を適用しています。

これらの要素は、絶対配置されたコンテナ（ul）内に存在します。

CSSの配置では、コンテナによって、位置指定された子の境界が設定されますが、width,height、max-widthなどではありません。配置された要素は、親の境界に限定されます。

したがって、max-width: 200remはコンテナの幅で上書きされます。

この投稿は、より詳細な情報を提供し、さらに問題が説明するのに役立つことがあります。あなただけのラップしないようにliテキストをしたい場合は、

• Set a child's width between parent's width and max-width

---

をwhite-space: nowrap追加：

を

#shop-navigation .sub-menu li { 
    background: #ffffff; 
    min-width: 10rem; 
    max-width: 200rem; 
    margin: 0 0 1px; 
    text-align: left; 
    display: block; 
    border-radius: 0.25rem; 
    white-space: nowrap; /* NEW */ 
}