html - CSS: super 菜单 - 绝对高度问题

Question

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>

Answer 1

只需为您的元素使用 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>