드롭 다운 탐색 메뉴 겹침

Question

나는 드롭 다운 탐색 메뉴를 만들지 만 "드롭 다운"이 수평 인 수직 방향 만 만듭니다. 문제는 기본적으로 4 개의 100x100px 사각형을 가지고 있으며 하위 메뉴가 오른쪽으로 커서를 올리면됩니다. 이 코드를 사용하면 새 하위 메뉴가 원래 사각형과 겹치는 것을 제외하고는 작동합니다. 위치가 절대적이지 않은 경우 모든 항목이 왼쪽으로 떠 있어도 하위 메뉴가 확장됩니다. 나는 몇 시간 동안 모든 것을 시도하고 구석 구석에 봤지만 간단히 작동하지 않는다. 하위 메뉴가 오른쪽으로 펼쳐 지도록 다음에 5 배의 여백을 두도록하려면 어떻게해야합니까?

#nav { 
    float:left; 
    list-style-type: none; 
    height: 540px; 
    width: 100px; 
    margin:0 auto; 
} 

#nav li { 
    list-style-type: none; 
    display:block; 
    float:left; 
} 

nav ul:after { 
    content: ""; clear: both; display: block; 
} 

#nav ul a { 
    display: block; 
    width: 100px; 
    height: 100px; 
    text-decoration: none; 
    list-style-type: none; 
    border: 1px solid black; 
    margin-right: 5px; 
    margin-bottom: 5px; 
    float:left; 
} 

#nav ul li:hover > ul{ 
    display:block; 
    text-decoration: none; 
    list-style-type: none; 
    overflow:hidden; 
    position:absolute; 
    float:left; 
} 

#nav ul ul{ 
    display:none; 
    float:left; 
} 

및 HTML :

<div id="nav"> 
    <ul> 
     <li> 
      <a href="index.html" class="home"> 
       <img src="#" width="100" height="100" 
       onmouseover="this.src='#'" 
       onmouseout="this.src='#';"> 
      </a> 
     </li> 
     <li> 
      <a href="#" class="cloud" target="_blank"> 
       <img src="#" width="100" height="100" 
       onmouseover="this.src='#'" 
       onmouseout="this.src='#';"> 
      </a> 

      <ul> 
       <li> 
        <a href="#" target="_blank"> 
         <img src="#" width="100" height="100"> 
        </a> 
       </li> 
       <li> 
        <a href="#" target="_blank"> 
         <img src="#" width="100" height="100"> 
        </a> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="#" class="message" target="_blank" > 
       <img src="#" width="100" height="100" 
       onmouseover="this.src='#'" 
       onmouseout="this.src='#';"> 
      </a> 
      <ul> 
       <li> 
        <a href="#" target="_blank"> 
         <img src="#" width="100" height="100"> 
        </a> 
       </li> 
       <li> 
        <a href="#" target="_blank"> 
         <img src="#" width="100" height="100"> 
        </a> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="#" class="box" target="_blank"> 
       <img src="#" width="100" height="100" 
       onmouseover="this.src='#'" 
       onmouseout="this.src='#';"> 
      </a> 
      <ul> 
       <li> 
        <a href="#" target="_blank"> 
         <img src="#" width="100" height="100"> 
        </a> 
       </li> 
       <li> 
        <a href="#" target="_blank"> 
         <img src="#" width="100" height="100"> 
        </a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

여분의 리튬의 하위 메뉴 버튼입니다.

Answer 1

시도 #nav ul li:hover > ul

left: 115px 

좀 너무 감사 작동