0

そのため、外側のラッパーの中心にある div 内に画像があります。5 つのサブ div をインラインで表示するラッパーの上部に水平メニューがあります。5 つのインライン サブ div の最初にカーソルを合わせると表示されるドロップ ダウン メニューの css を追加しました。ドロップダウン メニューが表示されると、画像が右にずれてしまい、修正方法がわかりません。ご覧のとおり、私は z-index をいじってみましたが、z-index で何が起こっているのか、何が起こっていないのか、そしてそれがどのように正しく使用されているのかを理解しているかどうかはわかりません。

HTML:

<div class="wrapper">
     <div id="topmenu">
        <div id="home"><a href="index.html">Home</a>
            <ul>
                 <li>item 1</li>
                 <li>item 2</li>
                 <li>item 3</li>
            </ul>   
        </div>  
     </div>

     <div id="logo">
        <img src="image.jpeg" />
     </div>
</div>

CSS

.wrapper{
    position:relative;
    width:960px;
    height:905px;
    margin-top:5px;
    margin-left:auto;
    margin-right:auto;
    /*text-align:left;
    border:2px solid red;*/
    background-color:#FFFFFF;
}

#topmenu{
    position:relative;
    border-bottom:2px solid #164207;
    height:30px;
    background-color:#ffffff;
    z-index:3;
} 

#logo{
    position:relative;
    border-bottom:2px solid #164207;
}


#logo img{
    position:relative;
    height:350px;
    width:500px;
    z-index:1;
}

#home{
    display:inline-block;
    float:left;
    margin-top:5px;
    margin-left:15px;
    width:169px;
    color:#164207;
    font-family:serif;
    font-weight:bold;
    font-size:20px;
    text-align:center;
    border-right:2px solid #164207;
}

#home:hover .sub-menu {display:inline-block;}

.sub-menu {
    overflow:hidden;
    display: none;
    width: 169px;
    background-color: #164207;
    color:#FFFFFF;
    margin-top: 5px;
    border: 1px solid #fff;
    -webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
    -moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
    box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}

.sub-menu li {
    position:relative;
    list-style-type: none;
    display: block;
    border-bottom: 1px solid #FFFFFF /*#eaeaea*/;
    font-family:serif;
    font-size: 12px;
    height: 15px;
    padding: 8px 0;
}
4

1 に答える 1

1

スタッキング コンテキストを作成するには、に追加position: absolute;する必要があります。.sub-menu

jsフィドル

#home{
    display:block;
    float:left;
    margin-top:5px;
    width:184px;
    color:#164207;
    font-family:serif;
    font-weight:bold;
    font-size:20px;
    text-align:center;
    border-right:2px solid #164207;
}

#home:hover .sub-menu {display:block;}
#course:hover .sub-menu{display:block;}
#leagues:hover .sub-menu{display:block;}
#events:hover .sub-menu{display:block;}
#about:hover .sub-menu{display:block;}

    .sub-menu {
        overflow:hidden;
        display: none;
        width: 182px;
        background-color: #164207;
        color:#FFFFFF;
        /*padding: 10px 10px;
        margin-left: 0px;*/
        margin-top: 5px;
        border: 1px solid #fff;
        -webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
        -moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
        box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
        position:absolute;    /**************************** Important Bit*/
        top:24px;
    }

配置を再調整するには、 、 、、、およびmargin-left:15px;から削除し#home、それらすべての幅を調整します。次に幅を調整します。詳細と作業モデルについては、上記の更新された jsFiddle を参照してください。#course#leagues#events#about.sub-menu

<ul>順不同リストにナビゲーションを設定した例</ul>。- すべての ID とその結果の冗長な CSS は必要ありません。

于 2013-04-27T00:04:34.973 に答える