可以浮动在任意后续内容上的简单 CSS 菜单

Question

我想要一个只使用 CSS 而不使用 JavaScript 的干净整洁的解决方案。 如果/如何这需要<menu> 和其他元素上的z-index 设置，以及是否有不需要z-index 设置的干净解决方案，我最感兴趣，尤其是。不在“内容”标签上。当然，在菜单打开时，菜单后面的内容不应该改变位置。

所需的（示例性）html 结构：

<menu>
  <ul>
    <li>Item 1
    <li>Item 2
    <li>BigItm3
    <li>Item 4
    <li>Item 5
    <li>LastItm
  </ul>
</menu>
<p>Text</p>
<p>MoreText</p>
<p style="float:left">Floating</p>
<img style="position:absolute; left:100px; top: 40px;"
     src="http://tinyurl.com/jaheira-dance">
<form><button>OK</button><br><textarea>text</textarea></form>
<p>HTML content (e.g., loaded + injected via ajax)</p>
<iframe>

所需的视觉行为：1. 未将鼠标悬停在菜单上时

  --------
  | Menu |
  --------
Lorem ipsum dolor
sit amet    ==========
===== Lorem | iframe |
|img| ipsum |        |
===== dolor ==========

所需的视觉行为：2. 将鼠标悬停在菜单上时

  -------------
  | Menu      |
  |           |
Lo| * Item 1  |or
si| * Item 2  |=======
==| * BigItm3 |frame |
|i| * Item 4  |      |
==| * Item 5  |=======
  | * LastItm |
  =============

我已经拥有的：

menu:before { content: "Menu"; } /* always display the menu title */

menu {
    float:   left;
    height:  16px;
    padding: 1px;
    margin:  0px;
    font-height: 10px;
    margin-left: 20px;
    border: solid 1px gray;
}

menu>ul       { display: none; }  /* hide menu items when closed */
menu:hover>ul { display: block; } /* show items when open */

menu:hover    {
    height:   auto;  /* expand menu */
    position: fixed; /* move other elements behind menu */
}

menu + * { clear: both; } /* move following content below menu */

Answer 1

这就是您需要更改的全部内容。

If your cat image doesn't need to be position absolute

menu {
  position: absolute; /* Change */
  top: 0; /* Change */
  left: 20px; /* Change */
  background: #fff; /* Change (not needed but without a bg the text will show through */
  height:  16px;
  padding: 1px;
  margin:  0px;
  font-height: 10px;
  border: solid 1px gray;
}

If it does need to be absolute then you can use an z-index

menu {
  position: absolute;
  top: 0;
  left: 20px;
  background: #fff;
  height:  16px;
  padding: 1px;
  margin:  0px;
  font-height: 10px;
  border: solid 1px gray;
  z-index: 10;
}

我最感兴趣的是是否/如何需要在

上设置 z-index

嗯，它需要 z-index 的原因是来自具有绝对位置的图像，它将这两个元素放在同一级别。

如果您对z-index 有意见，那么您可以允许元素进入页面的顺序来决定哪些内容堆叠在哪些内容上。通过将菜单添加到 HTML 的末尾，您将在没有 z-index 的情况下获得所需的结果，因为它堆叠在另一个 absolute 对象之上。

Without z-index