0

我想要一个只使用 CSS 而不使用 JavaScript 的干净整洁的解决方案。我最感兴趣的是/如何这需要z-index在<menu>和其他元素上进行设置，以及是否有不需要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 */
4

1 回答 1

0

这就是你需要改变的全部。

如果您的猫图像不需要是绝对位置

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

如果它确实需要是绝对的，那么您可以使用 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 的末尾，您将无需 a 即可获得所需的结果，z-index因为它堆叠在另一个absolute对象的顶部。

没有 z-index

于 2013-10-23T18:26:15.273 回答