下拉子菜单自动宽度不起作用

我有一个简单的下拉菜单，如果子菜单项大或小，我希望子菜单的宽度能够占用它需要的空间。下拉子菜单自动宽度不起作用

眼下，它包装上的第二行..见

我试过宽度：自动;不起作用。

CSS：

.dropdown { 
    position: relative; 
    display: inline-block; 
    margin:0 12px; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background:white; 
    width:auto; 

    padding: 12px 16px; 
    z-index: 1; 

} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 

.subm{margin:12px 0;}

我的HTML：

<div class="dropdown"> 
    <span>PRODUCT INFO</span> 
    <div class="dropdown-content"> 
     <div class="subm"><a class="menulink" href="#ingredients">INGREDIENTS</a></div> 
     <div class="subm"><a class="menulink subm" href="#ingredients">CUSTOMER REVIEWS</a></div> 
     <div class="subm"><a class="menulink subm" href="#ingredients">NUTRITIONAL FACTS</a></div> 
     <div class="subm"><a class="menulink subm" href="#ingredients">ORDER NOW</a></div> 
    </div> 
</div>

感谢

来源

2016-12-28 user3011784

你可以放置position:relative身体和这样的宽度可以不同。

https://jsfiddle.net/0huz4dam/

来源

2016-12-28 18:34:23

作品，谢谢。我不明白为什么。 – user3011784

您添加了相对位置的父元素具有基于其内容的固定宽度。因此，如果孩子们拥有更大的文字，他们就无法扩大父母的宽度。你可以尝试添加更多的文字给家长，你会看到不同之处 –

尝试使用position: relative到.dropdown。请参见下面的代码片段：

.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: 0 12px; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: relative; 
 
    background: white; 
 
    width: auto; 
 
    padding: 12px 16px; 
 
    z-index: 1; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.subm { 
 
    margin: 12px 0; 
 
}

<div class="dropdown"> 
 
    <span>PRODUCT INFO</span> 
 
    <div class="dropdown-content"> 
 
    <div class="subm"><a class="menulink" href="#ingredients">INGREDIENTS</a></div> 
 
    <div class="subm"><a class="menulink subm" href="#ingredients">CUSTOMER REVIEWS</a></div> 
 
    <div class="subm"><a class="menulink subm" href="#ingredients">NUTRITIONAL FACTS</a></div> 
 
    <div class="subm"><a class="menulink subm" href="#ingredients">ORDER NOW</a></div> 
 
    </div> 
 
</div>

来源

2016-12-28 18:38:07 Chris

刚从.dropdown-content风格删除position:absolute它将工作

.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: 0 12px; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    background: white; 
 
    padding: 12px 16px; 
 
    z-index: 1; 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 
.subm { 
 
    margin: 12px 0; 
 
}

<div class="dropdown"> 
 
    <span>PRODUCT INFO</span> 
 
    <div class="dropdown-content"> 
 
    <div class="subm"><a class="menulink" href="#ingredients">INGREDIENTS</a> 
 
    </div> 
 
    <div class="subm"><a class="menulink subm" href="#ingredients">CUSTOMER REVIEWS</a> 
 
    </div> 
 
    <div class="subm"><a class="menulink subm" href="#ingredients">NUTRITIONAL FACTS</a> 
 
    </div> 
 
    <div class="subm"><a class="menulink subm" href="#ingredients">ORDER NOW</a> 
 
    </div> 
 
    </div> 
 
</div>

来源

2016-12-28 18:52:44

下拉子菜单自动宽度不起作用

回答

相关问题