4

私はこのhtmlコードを持っています

<div id="navbar">
    <ul>
        <li><a href="#">Page1</a></li>
        <li><a href="#">page2</a></li>
    <li id="NavItem">
        <a href="#">page3</a>
        <div id="PopOver">Some text here<br>Some text here<br>Some text here<br>Some text here<br>Some text here<br>Some text here<br>Some text here</div>
    </li>
        <li><a href="#">page4</a></li>
    </ul>
</div>


<div id="banners">
    <div class="wrap">
        <div class="left"><img src="http://www.mountainecho.bizland.com/banex1.jpg"></div>
        <div class="right"><img src="http://www.mountainecho.bizland.com/banex1.jpg"</div>
    </div>
</div>

そしてCSSコード

#navbar { position: relative; margin: 3px; }
#navbar ul { padding: 0; margin: auto; background: #f0f0f0 url(../images/1px.png) repeat-x 0 -441px; padding: 4px 0 4px 0; }
#navbar li { display: inline; margin-right: 80px; }
#navbar li a { font-family: EqualSansDemo; font-size: 1.6em; color: #555555; text-shadow: 1px 1px 0px #fff; }   
#navbar li a:hover { color: #0071e4; } 


#PopOver {
position:absolute; 
border:2px solid #07B1F1; 
width:170px; 
height:auto; 
padding:15px 5px 10px 5px;
display:none;
top:30px; 
left:229px; 
background-color:#FFFFFF;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;

}

#NavItem:hover #PopOver {display:block}


#banners { padding-top: 25px; padding-bottom: 25px; position: relative;  } 
.wrap {  width: 1000px; margin: 0 auto; }
.left { float: left; }
.right { float: right; }

問題 ：

多くの場合、ナビゲーション バーは他の div の下に表示されなくなります。

ここに画像の説明を入力

たとえば、「#banners」div を追加しましたが、「position: relative;」が原因で問題があると思います。

しかし、私が言ったように、「#banners」div は単なる例であり、これを修正する必要がある場合は、#navbar #NavItem:hover #PopOver にする必要があります

任意のアイデアをお願いします?

ありがとうございました。

4

3 に答える 3

2 
#PopOver {
position:absolute; 
border:2px solid #07B1F1; 
width:170px; 
height:auto; 
padding:15px 5px 10px 5px;
display:none;
top:30px; 
left:229px; 
background-color:#FFFFFF;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
z-index:1;
}
于 2013-04-21T02:25:59.470 に答える
1

セットz-index:2;以上#PopOver

于 2013-04-21T02:22:20.277 に答える
0

#navbar アイテムに z-index 値を設定します。 http://www.w3schools.com/cssref/pr_pos_z-index.asp

于 2013-04-21T02:18:09.387 に答える