jsfiddle:https://jsfiddle.net/ms6g9c61/1
如您所见,主菜单列表只有 2 行深。我需要它的高度(视觉上你可以看到蓝色边框)相应地调整到打开的子菜单。每个子菜单的高度都不一样。
知道如何做到这一点吗?我真的尽量不使用 JS。
我在想也许可以更改标记,而不是列表,我们可以将其更改为像表格一样工作的 div?我不知道这是否有效,因为绝对定位。 1 标准高度也不起作用,它必须能够随着差异进行调整。子菜单。
这是 HTML:
body {
margin: 15px;
}
.into {
margin: 10px 0;
}
.menuList {
list-style: none;
position: relative;
padding: 0;
margin: 0;
}
.menuList > li {
background: white;
border-right: 1px solid blue;
width: 150px;
}
.subMenu {
display: none;
position: absolute;
top: 0;
left: 161px;
background: pink;
width: 400px;
}
.submenuList {
padding: 0;
margin: 0;
list-style: none;
}
.menuList > li:hover > .subMenu {
display: block;
}
<p class="intro">
flyout menu w/ adjusting height<br/>
left menu must adjust in height to match submenu that appears to the right.
</p>
<ul class="menuList">
<li>
<a href="#">Category 1</a>
<div class="subMenu">
<ul class="submenuList">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Category 2</a>
<div class="subMenu">
<ul class="submenuList">
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</li>
</ul>
最佳答案
只需为您的元素使用 position: relative 。上方的菜单框现在随子项调整大小。
我为你摆弄了一下:
CSS
body {
margin: 15px;
}
.into {
margin: 0;
}
.menuList {
list-style: none;
position: relative;
padding: 0;
margin: 0;
}
.menuList > li {
background: white;
border-right: 1px solid blue;
width: 150px;
}
.subMenu {
display: none;
top: 0;
left: 151px;
background: pink;
width: 400px;
}
.submenuList {
padding: 0;
margin: 0;
list-style: none;
}
.menuList > li:hover > .subMenu {
display: block;
position: relative;
}
.menuBox {
position: relative;
}
HTML
<p class="intro">
flyout menu w/ adjusting height<br/>
left menu must adjust in height to match submenu that appears to the right.
</p>
<div class="menuBox">
<ul class="menuList">
<li>
<a href="#">Category 1</a>
<div class="subMenu">
<ul class="submenuList">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Category 2</a>
<div class="subMenu">
<ul class="submenuList">
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</li>
</ul>
</div>
关于html - CSS: super 菜单 - 绝对高度问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45109536/