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

我想要一个干净的解决方案，只使用CSS，不使用JavaScript。 我最感兴趣的是，这是否/如何需要

和其他元素上的

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>

期望的视觉行为：2。当鼠标悬停在菜单上时

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

  -------------
  | 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 */

---

这就是你需要改变的一切

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

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

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

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索引的原因是因为图像的位置是绝对的，这将两个元素放在同一水平上

如果您对z-index有异议，那么您可以允许元素进入页面的顺序来决定在什么页面上堆叠什么。通过将菜单添加到HTML的末尾，您将在不使用

z-index

的情况下获得所需的结果，因为它堆叠在另一个

absolute

对象的顶部

---

谢谢，这就解决了问题。使菜单

position:absolute

也使整个布局更加稳定。我的浮动菜单导致后续元素出现其他问题。菜单上只有一个

z-index

，这正是我想要的。这应该足够强大，允许覆盖任何页面内容。如果您给它一个较低的

z索引

，或者只给页面覆盖一个较高的

z索引

，比如1000左右，那么它们应该正常覆盖任何元素。祝你的设计好运！

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

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