html - 位置絶対クロスホバーメニューのあるdiv

Question

私は2つの主要な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 ul1 以上の z-index を指定すると、機能するように見えました。

また、IE7 のローカル スタック コンテキストに関する明らかな問題を回避するために、次の新しい CSS ルールを追加しました。

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

更新されたデモ(レイヤリングをより明確にするために背景色を使用)。IE8 以前で jsfiddle の実行に問題がある場合は、このスタンドアロン リンクを使用してください。テスト済み: IE7/8/9、FF、Chrome、Safari、Opera。

Answer 2

に与えます

.searchcontainertop {
    z-index: -1;
}

それは私のために働いた。