具有绝对位置的 div 交叉悬停菜单

Question

我有两个主要的 div

<div1>menu</div1>
<div2>searchbox</div2>

由于 div2 位于下方，我无法在悬停时显示子菜单； div2=div.searchcontainertop 具有绝对位置，该 div 位于悬停子菜单的顶部，因此无法在悬停时显示子菜单
我试过了，firefox，chrome，opera，IE10 - jsfiddle

如何显示子菜单？

<style type="text/css">
<!--
.searchcontainermain {
    width: 100%;
    position: relative;
}
.searchcontainertop {
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}
.searchcontainerleft {
    float: right;
    width: 400px;
    padding-right: 1%;
}
#nav, #nav ul {
    width: 100%;
    height: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
    background: none;
    font: 12px/28px Verdana, Arial, Helvetica, sans-serif;
}
#nav li {
    float: left;
    position: relative;
}
#nav li:hover, #nav li.jshover {
    background-color: none;
}
#nav a {
    font-weight: bold;
    display: block;
    color: #000;
    padding: 0 19px;
    text-align: center;
    text-decoration: none;
    border-right: 1px solid #999;
}
#nav a:hover {
    color: #000;
}
#nav ul {
    border: none;
    border-top: 0;
    border-bottom: 0;
    display: none;
    position: absolute;
    top: 28px;
    left: 0;
}
#nav ul a {
    border: 0;
    border-bottom: 1px solid #000;
    width: 114px;
}
#nav li:hover ul, #nav li.jshover ul {
    display: block;
}
-->
</style>

<div id="conteiner">
  <div id="main">
    <div id="menu">
      <ul id="nav">
        <li><a href="" target="_self">menu1</a></li>
        <li><a class="active" href="" target="_self">menu2</a>
          <ul>
            <li><a href="" target="_self">submenu1</a></li>
            <li><a href="" target="_self">submenu2</a></li>
            <li><a href="" target="_self">submenu3</a></li>
            <li><a href="" target="_self">submenu4</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="searchcontainermain">
      <div class="searchcontainertop">
        <div class="searchcontainerleft"> some text goes here<br />
          some text goes here<br />
          some text goes here<br />
          some text goes here<br />
          some text goes here<br />
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

给.nav ul 1 或更大的 z-index 似乎有效。

为了避免 IE7 中的本地堆栈上下文出现明显问题，我添加了以下新 CSS 规则：

#menu {
    position:relative;
    z-index:1;
}

Updated demo（加上背景色让层次感更明显）。如果在 IE8 及更早版本中运行 jsfiddle 时出现问题，请使用此standalone link。测试于：IE7/8/9、FF、Chrome、Safari、Opera。

Answer 2

给

.searchcontainertop {
    z-index: -1;
}

它对我有用。