CSS鏈接懸停定位問題

Question

我寫了一個小的通用菜單，需要幫助瞭解爲什麼第二級鏈接總是顯示在第一級鏈接的右側。代碼是有點長，所以這裏是一個jsfiddle。

這裏是本質上發生的事情。

   <nav> 
        <ul> 
         <li><a href='#'>Link 1</a></li> 
         <li> 
          <a href='#'>Link 2</a> 
          <ul> 
           <li><a href='#'>Sub Link 1</a></li> 
          </ul> 
         </li> 
         <li> 
          <a href='#'>Link 3</a> 
          <ul> 
           <li><a href='#'>Sub Link 1</a></li> 
          </ul> 
         </li> 
         <li><a href='#'>Link 4</a></li> 
         <li><a href='#'>Link 5</a></li> 
         <li><a href='#'>Link 6</a></li> 
         <li><a href='#'>Link 7</a></li> 
         <li><a href='#'>Link 8</a></li> 
         <li> 
          <a href='#'>Link 8</a> 
          <ul> 
           <li><a href='#'>Sub Link 1</a></li> 
          </ul> 
         </li> 
        </ul> 
       </nav> 

鏈接2和鏈接2子鏈接懸停在右側。我想鏈接8子鏈接懸停左側。現在它超出了包裝div的界限。理想情況下，如果右側有足夠的空間（256像素），請將鼠標懸停在右側。如果沒有，則將鼠標懸停。最右邊的頂部鏈接應該有子鏈接懸停左側。

Answer 1

試試這個http://jsfiddle.net/zx8oyx2n/6/

HTML

<ul class="left" > 
<li><a href='#'>Sub Link 1</a> 
    </li> 
    </ul> 

CSS

.left{ 
right:0; 
} 

Answer 2

我用

nav ul li:last-child ul { right: 0; } 

，因爲我真的不關心IE8或更低。