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受其包含的导航栏的大小限制。最简单的方法是将菜单div移到导航栏div之外。

您可以添加样式以正确定位导航栏和div。

如何使嵌套元素宽度超过父元素

1 个答案: