子列表元素的顶部空格尾随

Question

我有多个列表元素，他们通过隐藏（display：none）来改变，但即使隐藏的元素也从顶部占用空间。

尝试点击您将看到的子菜单项。不要介意空白图像。

http://fantasycore.com/clients/menu/menu.html

我内部没有内联元素，全部检查。它们也是绝对的。他们怎么能占用空间？

Answer 1

正如@FaridNouriNeshat在评论中提到的那样，你的方法的问题是position:absolute;绝对定位到最近的父position: static;，在这种情况下，它是直接的li父母。请参阅下面的快速示例：

$('.main-wrapper > ul > li').on('click', function() {
    $(this).siblings('.active').removeClass('active');
    $(this).addClass('active');
  });

.main-wrapper {
  border: 1px solid #000;
  position: relative;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 50%;
}
li {
  padding: 20px;
  border-top: 1px solid #000;
}
li:first-child {
  border: none;
}
ul ul {
  display: none;
}

li.active ul {
  display: block;
  background: red;
  width: 50%;
  position: absolute;
  top: 0;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrapper">
  <ul>
  <li>
    Menu 1
    <ul>
      <li>Submenu 1a</li>
      <li>Submenu 1b</li>
      <li>Submenu 1c</li>
      <li>Submenu 1d</li>
      <li>Submenu 1e</li>
    </ul>
  </li>
  <li>
    Menu 2
    <ul>
      <li>Submenu 2a</li>
      <li>Submenu 2b</li>
      <li>Submenu 2c</li>
      <li>Submenu 2d</li>
      <li>Submenu 2e</li>
    </ul>
  </li>
  <li>
    Menu 3
    <ul>
      <li>Submenu 3a</li>
      <li>Submenu 3b</li>
      <li>Submenu 3c</li>
      <li>Submenu 3d</li>
      <li>Submenu 3e</li>
    </ul>
  </li>
  
  <li>
    Menu 4
    <ul>
      <li>Submenu 4a</li>
      <li>Submenu 4b</li>
      <li>Submenu 4c</li>
      <li>Submenu 4d</li>
      <li>Submenu 4e</li>
    </ul>
  </li>
 </ul>
  </div>