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 z指数1或更高似乎有效。

为了避免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;
}

它对我有用。

div与位置绝对交叉悬停菜单

2 个答案: