Question

jsfiddle：https://jsfiddle.net/ms6g9c61/1

如您所见，主菜单列表只有2行深。我需要它的高度（在视觉上你可以看到蓝色边框）相应地调整打开的子菜单。每个子菜单的高度都不相同。

知道如何做到这一点？我真的不想使用JS。

我想也许更改标记而不是列表，我们可以将其更改为像表一样工作的div？由于绝对的定位，我不知道这是否有效。 1标准高度也不会起作用，它必须能够与差异调整。子菜单。

这是HTML：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

只需使用position：relative作为你的元素。上面的MenuBox现在调整子项。

我为你摆弄了一下：

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>

CSS：超级菜单 - 绝对高度问题

1 个答案: