菜单项的宽度和最大宽度之间的下拉菜单大小的水平菜单
问题描述:
我需要带有下拉菜单的简单水平菜单的帮助。菜单项的宽度和最大宽度之间的下拉菜单大小的水平菜单
我希望.drop
的尺寸不小于.item
的尺寸,并且在max-width
的限制内尽可能大。
问题是:.drop
不扩展到max-width
。
div {
background: #333;
color: white;
}
ul {
padding: 0;
}
li {
list-style: none;
padding: 5px 10px;
position: relative;
}
.item {
display: inline-block;
}
.drop {
background: #666;
display: none;
left: 0;
max-width: 400px;
min-width: 100%;
position: absolute;
top: 100%;
}
.item:hover .drop {
display: block;
}
<div>
<ul>
<li class="item">Lorem
<ul class="drop">
<ul>
<li>Lorem</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua</li>
</ul>
</ul>
</li>
<li class="item">Lorem ipsum dolor
<ul class="drop">
<li>Lorem</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</li>
</ul>
</div>
答
首先.item
没有指定的宽度和min-width:100%;
覆盖min-width:400px;
从而使母体宽度的.drop
100%。父母没有分配宽度。
由于.item
设置为显示块,因此也为其指定100%的宽度。
答
以下是解决方案。你需要将下拉菜单换成另一个ul,并应用下面的ccs规则来实现这一点。只需相应地设置所需的宽度和最大宽度即可。
div {
background: #333;
color: white;
font-size: 0px;
}
ul {
padding: 0;
}
li {
list-style: none;
padding: 5px 10px;
position: relative;
display: inline-block;
font-size: 16px;
}
a {
display: block;
}
.drop {
display: none;
left: 0;
width: 250px;
/* Width of the width */
position: absolute;
top: 100%;
background: transparent;
}
ul li ul {
display: inline-block;
max-width: 250px;
/* max width it will cover */
box-shadow: 0 0 2px rgba(0, 0, 0, .6);
padding: 0;
background: #666;
padding: 10px;
}
ul li .drop li {
display: table-row;
/* display like a table-row */
}
.item:hover .drop {
display: block;
}
<div>
<ul>
<li class="item">Lorem
<div class="drop">
<ul>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua</li>
</ul>
</div>
</li>
<li class="item">Lorem ipsum dolor
<div class="drop">
<ul>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
</ul>
</div>
</li>
</ul>
</div>
+0
请阅读我的问题:我希望.drop尺寸不小于.item尺寸 – Sam
'最小宽度:400像素;'只是一个错字,它必须是'最大宽度:400像素;'。对不起。 – Sam