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

当我不将鼠标悬停在li项目上时，它会给我这种效果：

enter image description here

当我将鼠标悬停在这个项目上时，它会给我这种效果：

enter image description here

很棒的菜单有效，我的问题是“回到顶部”一词与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会隐藏元素并将其从页面流中删除（因此它不会占用任何空间或以任何方式影响其他元素）。

Answer 2

visibility：hidden仅使元素不可见，但不会将其从页面流中删除。 display：none将隐藏元素并将其从页面流中删除（因此它不会占用任何空间或以任何方式影响其他元素）

ul.topmenu li ul
{
    display: none;
}

ul.topmenu li.submenu:hover ul
{
    display: block;
}

Answer 3

visibility:hidden不显示元素，但仍为其保留空间。

尝试display:none

Answer 4

使用CSS display: none规则代替visibilty: hidden，因为您希望您的代码不显示，您不需要空白在它的位置分配的空间（see）。来自W3 docs：

请注意，'none'的显示不会创建一个隐形框;它根本不会创造任何盒子。 CSS包括一些机制，使元素能够在格式化结构中生成影响格式但本身不可见的框。

另外，W3 validator对您的HTML有什么看法？

隐藏的李项造成的大空白？

4 个答案: