は私は3つのdivを有しますmargin-top：ヘッダーの上に表示されるコンテンツdivの一部を表示するには、このスクリーンショット（下）を参照してください。私はまた、ul＃top-navに#contentより大きなz-indexを与えましたが、運はありません。事前z屈折率
私はリンクの上にマウスを移動するとき（...など、訪問、ボランティア、について）ドロップダウンメニューを表示したいが、彼らは、コンテンツのdivの後ろに表示されます。私は、コンテンツdivがヘッダーdivよりも大きなz-indexを持っているので、これが起こるのは知っていますが、リンク上にマウスを置いたときにcontent divにナビゲーションを表示することは可能ですか？私は正しいあなたの問題を取得していた場合
z-indexは、配置された要素に対してのみ機能します。この場合、何にもz-indexを設定する必要はありません。
メニュー項目とそのサブメニューをいくつかのボックスに入れます。 position: relative;で:hoverルールを使用してください。
は、以下のフィドルを参照してください
フィドル：http://jsfiddle.net/xvdfD/8/
デモ：http://jsfiddle.net/xvdfD/8/embedded/result/
CSS：私はあなたの「ヘッダーを作るお勧めします
#header
{
background:#999;
height:100px;
}
#content {
background:#ccc;
height:100px;
z-index:100;
margin-top:-98px;
border:1px solid magenta;
color:#6F6;
}
#footer {
background:#999;
height:100px;
}
ul#navigation-1 {
margin:0;
padding:1px 0;
list-style:none;
width:100%;
height:21px;
border-top:1px solid #b9121b;
border-bottom:1px solid #b9121b;
font:normal 8pt verdana, arial, helvetica;
}
ul#navigation-1 li {
margin:0;
padding:0;
display:block;
float:left;
position:relative;
width:148px;
}
ul#navigation-1 li a:link, ul#navigation-1 li a:visited {
padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#b9121b;
color:#ffffff;
width:148px;
height:13px;
}
ul#navigation-1 li:hover a, ul#navigation-1 li a:hover, ul#navigation-1 li a:active {
padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#ec454e;
color:#ffffff;
width:146px;
height:13px;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
}
ul#navigation-1 li ul.navigation-2 {
margin:0;
padding:1px 1px 0;
list-style:none;
display:none;
background:#ffffff;
width:146px;
position:absolute;
top:21px;
left:-1px;
border:1px solid #b9121b;
border-top:none;
}
ul#navigation-1 li:hover ul.navigation-2 {
display:block;
}
ul#navigation-1 li ul.navigation-2 li {
width:146px;
clear:left;
width:146px;
}
ul#navigation-1 li ul.navigation-2 li a:link, ul#navigation-1 li ul.navigation-2 li a:visited {
clear:left;
background:#b9121b;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}
ul#navigation-1 li ul.navigation-2 li:hover a, ul#navigation-1 li ul.navigation-2 li a:active, ul#navigation-1 li ul.navigation-2 li a:hover {
clear:left;
background:#ec454e;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}
"身体の背景画像 - この方法では、ナビゲーションやコンテンツ間でZ-インデックスの問題にぶつからない。彼らが必要とするようにdivsを背の高いものにしてください。
ナビゲーションを実際のヘッダーdivに入れて適切にスタイルを設定するだけです。
それは、任意の手間をかけずに可能である、あなたは私達にあなたのコード/フィドルを表示することができますので、我々は変更にあなたを指すことができます...してください... – w3uiguru
は、あなたも、CSSを表示することができます.... 。 – w3uiguru
コンテンツがDOMのヘッダーの後にある場合は、ヘッダーの上に表示するためのz-indexは必要ありません。それは自動的に起こります。とにかく、リンクもHTML要素です、私は推測する？彼らにもスタイルを与えることができます！ –