下拉導航菜單重疊

Question

我正在創建一個下拉式導航菜單，但只有垂直的「下拉菜單」是水平的。問題是我基本上有4個100x100px的正方形，我希望子菜單在懸停在右側時打開。有了這個代碼我工作，除了新的子菜單重疊原來的廣場。如果位置不是絕對的，即使一切都向左浮動，子菜單也會向下擴展。我已經嘗試了幾個小時，並搜索了每個角落，但我無法使其工作。我該如何做到這一點，使子菜單向右擴展到5px的邊界到下一個？

#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