當下拉菜單出現時，div向右移動

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; 
    } 

重新調整alignment-上所有的人都卸下margin-left:15px;從#home，#course，#leagues，#events，並且#about和調整寬度。然後調整.sub-menu的寬度。有關詳細信息和工作模型，請參閱上面更新的jsFiddle。

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