我有一个简单的下拉菜单,如果子菜单项很大或很小,我希望子菜单的宽度能够占据所需的空间。
现在,它在第二行换行.. 看
https://jsfiddle.net/nyb44xbd/1/
我试过 width:auto;不起作用。
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>
谢谢
最佳答案
您可以将 position:relative
放在 body 上,这样宽度就可以改变。
关于html - 下拉子菜单自动宽度不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41367759/