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以创建堆叠上下文。

jsFiddle

#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、#course、#leagues、#events和中删除，#about并调整所有它们的宽度。然后调整宽度.sub-menu。有关详细信息和工作模型，请参阅上面更新的 jsFiddle。

<ul>在无序列表中设置导航的示例</ul>。- 不需要所有的 id 和由此产生的冗余 CSS。

于 2013-04-27T00:04:34.973 回答