Question

所以我在div中有一个图像，它以一个外包装为中心。我在包装器的顶部有一个水平菜单，它显示5个内嵌的子div。我添加了一个下拉菜单的css，当你将鼠标悬停在5个内联子div中的第一个上时会出现这个菜单。当出现下拉菜单时，它会导致图像向右移动，我不能为我的生活找出如何纠正它。正如你所看到的，我已经玩过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;
}

Answer 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 1}}并调整所有宽度。然后调整.sub-menu的宽度。有关详细信息和工作模型，请参阅上面更新的jsFiddle。

Example with navigation set up in <ul> unordered list </ul>. - Don't Need all the id's and resulting redundant CSS.

当出现下拉菜单时，div向右移动

1 个答案: