3

背景画像の後ろから飛び出すドロップダウン ナビゲーションを作成しようとしています。これを行う最善の方法はz-indexを使用することだと思いましたが、これを機能させることができないようです...リンクは次のとおりです。 .towermarketing.net/ . 基本的に、トップ ナビゲーションのアイテムにカーソルを合わせると、破れた羊皮紙の後ろからサブ ナビゲーションがスライドするようにします。私は今、これに少し苦労しています。以下は私の CSS と HTML です。さらに必要な場合は、さらに投稿できます。どんな助けでも素晴らしいでしょう！

CSS:

.header {
    background: url(../../assets/images/repeatable-tear.png) repeat-x;
    height: auto;
    position: absolute;
    z-index: 1;
    width: 100%
}

.top-nav {
    z-index: 1  
}

.sub-nav {
    position:absolute;
    left:0;
    display:none;
    margin:0 0 0 -1px;
    padding:0;
    list-style:none;
    background: #4e8abe;
    z-index: -1;
}

HTML:

<div class="header">
    <div class="header-container">
        <div class="nav">
            <ul class="menu">
                <li class="top-nav"><a href="#">Home</a></li>
                <li class="top-nav"><a href="#">One</a>
                    <ul class="sub-nav">
                        <li><a href="#">One</a></li>
                        <li><a href="#">Two</a></li>
                    </ul>
                </li>
                <li class="top-nav"><a href="#">Two</a>
                    <ul class="sub-nav">
                         <li><a href="#">One</a></li>
                         <li><a href="#">Two</a></li>
                         <li><a href="#">Three</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

OK、いくつかのコメントでこれに変更しましたが、サブナビゲーションだけでなく、ナビゲーション全体を後ろに移動することしかできません:

CSS .header { 高さ: 自動; 幅: 100% }

.header-bg {
    background: url(../../assets/images/repeatable-tear.png) repeat-x;
    height: 175px;
    position: absolute;
    z-index: 1;
    width: 100%
}

HTML

<div class="header">
    <div class="header-bg"></div>
    <div class="header-container">
        <div class="nav">
            <ul class="menu">
                <li class="top-nav"><a href="#">Home</a></li>
                <li class="top-nav"><a href="#">One</a>
                    <ul class="sub-nav">
                        <li><a href="#">One</a></li>
                        <li><a href="#">Two</a></li>
                    </ul>
                </li>
                <li class="top-nav"><a href="#">Two</a>
                    <ul class="sub-nav">
                        <li><a href="#">One</a></li>
                        <li><a href="#">Two</a></li>
                        <li><a href="#">Three</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>          
</div>
4

2 に答える 2

0

あなたの階層を考えてみましょう。背景要素とドロップダウン要素は両方とも同じレベルにある必要があります。背景要素にドロップダウン要素が含まれているという事実により、それを z-index して忘却することはできません。背景を に適用してから、 1 レベル上に (からへ)div.header-containerシフトすると、この問題を解決できます。もちろん、ポジショニングの助けを借りて、目的を正確に達成することができます。div.navdiv.header-containerdiv.header

于 2012-07-17T14:39:38.880 に答える
0

ヘッダー要素の外側にサブナビゲーション メニューを配置する必要があります。現在、それらはヘッダー (背景が配置されている場所) と同じスタック コンテキストにあるため、z-index 値に関係なく背景画像の上に表示されます。

于 2012-07-17T14:36:10.417 に答える