Question

我想要一个干净利落的解决方案，它只使用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 */

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

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

1 个答案: