0

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

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

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

4

4 回答 4

3

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

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

于 2013-07-30T18:59:50.813 回答
1

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

ul.topmenu li ul
{
    display: none;
}

ul.topmenu li.submenu:hover ul
{
    display: block;
}
于 2013-07-30T18:57:38.417 回答
0

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

尝试display:none

于 2013-07-30T18:56:29.263 回答
0

使用CSS display: none规则而不是，因为您希望您的标签根本visibilty: hidden不显示，您不希望在它的位置分配一个空白空间（请参阅）。来自W3 文档：

请注意，显示“无”不会创建不可见的框；它根本没有创建任何盒子。CSS 包括使元素能够在格式化结构中生成影响格式化但本身不可见的框的机制。

另外，W3 验证器对您的 HTML 有什么看法？

于 2013-07-30T18:59:29.640 回答