css - 由隐藏的 li 元素引起的大空白？

Question

我有一个从列表项中弹出的菜单。一些这样的效果:

 <li>
          <ul class="topmenu">
              <li class="submenu">
                  <a class="otherIT" href="#" title="Common IT Tasks"><img src="./images/ittasks.png" alt="Common IT Tasks" /></a>
                  <a class="otherIT" href="#" title="Common IT Tasks">Other - Common IT Tasks</a>
                  <p>Most common IT tasks.</p>
                    <ul class="subsubmenu">
                        <li>
                            <a href="http://myURL.aspx/logticket.aspx" target="_blank" title="Log a ticket.">Log a ticket</a>
                        </li>
                        <li>
                            <a href="./batches/drives.bat" title="Run drives.bat file.">Map drives</a>
                        </li>
                        <li>
                            <a href="./batches/unlock.bat" title="Unlock a user's account.">Unlock a user</a>
                        </li>
                    </ul>
              </li>
          </ul>
      </li>

在这个 li 项的正下方，我有这个:

 <li class="break">
        <a href="#" title="Back to top" class="backtotop" style="font-size:x-small;">Back to top</a> 
      </li>

当我不将鼠标悬停在 li 元素上时，它会给我这样的效果:

当我将鼠标悬停在这个 li 元素上时，它会给我这样的效果:

很棒的菜单，我的问题是“返回顶部”一词与 li 项之间的差距相当大。我相信这是由于列表中的不可见 li 元素。对于任何感兴趣的人，CSS 就是这样的:

ul.topmenu, ul.topmenu ul {
  display: block;
  margin: 0;
  padding: 0;
}

ul.topmenu li {
  display: inline;
  list-style: none;
  margin: 0;
  padding-right: 1.5em;
}

ul.topmenu li ul {
  visibility: hidden; }

  ul.topmenu li.submenu:hover ul {
  visibility: visible;
}

除非您将鼠标悬停，否则会隐藏简单的经典可见性，但是，“返回顶部”一词与列表项之间的空白太大。

Answer 1

visibility: hidden 仅使元素不可见，但不会将其从页面流中移除。

display: none 将隐藏元素并将其从页面流中移除(因此它不会占用任何空间或以任何方式影响其他元素)。