div가 오른쪽으로 이동하면 드롭 다운 메뉴가 나타납니다.

Question

그래서 div의 내부에는 외부 래퍼가 가운데에있는 이미지가 있습니다. 5 개의 하위 div를 인라인으로 표시하는 래퍼 상단에 가로 메뉴가 있습니다. 5 개의 인라인 하위 div 중 첫 번째 마우스를 가리키면 나타나는 드롭 다운 메뉴에 CSS를 추가했습니다. 드롭 다운 메뉴가 나타나면 이미지가 오른쪽으로 이동하게되고 나에게 삶의 방식으로이를 해결하는 방법을 찾아 낼 수 없습니다. 당신이 볼 수 있듯이 나는 Z- 인덱스로 놀았지만, Z- 인덱스로 일어나는 일이나 일어나지 않은 일, 올바르게 사용 된 방법을 이해할 수 있는지 확실하지 않습니다.

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

당신은 스태킹 컨텍스트를 만들 .sub-menu에 position: absolute;를 추가해야합니다. 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;#course, #leagues, #events 및 #about, #home로부터 조정 폭을 제거 다시 조정합니다. 그런 다음 너비를 .sub-menu으로 조정하십시오. 자세한 내용 및 작업 모델은 위의 업데이트 된 jsFiddle를 참조하십시오. 당신이 시각적 인 "변화"있을 경우 특히 문제를 보여주기 위해 [jsfiddle.net] (http://jsfiddle.net) 한 경우

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