移動菜單下拉到左

Question

我有頂部菜單下拉導航（子菜單）和下拉菜單的右側。

CSS：

ul.dropdown ul { 
width: 220px; 
visibility: hidden; 
position: absolute; 
top: 100%; 
left: 0; 
} 

怎樣才能改變位置留給最後的菜單，因爲如果我最後菜單上懸停，下拉帶有橫向滾動因爲在右側沒有空間來顯示菜單？

請幫

Answer 1

ul.dropdown li { 
    position: relative; 
} 

ul.dropdown li ul { 
    position: absolute; 
    top: 20px; /* assign the correct value of the top line height */ 
    left: 0px; 
} 

這應該工作^^當position:relative分配position:absolute;一個元素的子元素絕對定位是相對於它的父，而不是身體。

我的錯，以某種方式覆蓋了與「最後一個孩子」的最後一部分。

這可能工作：

ul.dropdown li:last-of-type ul { 
    position:absolute; 
    left:0px; 
} 

Answer 2

您可以使用jQuery來解決這個問題，試試這個

$(function(){ 
    $(".dropdown:last").css("left","-120px"); 
}) 

Answer 3

您應該使用last-child選擇設置right屬性，而不是left：

.dropdown > li:last-child:hover ul { 
    left: auto; 
    right: 0; 
} 

您不提供小提琴我已經設置了這個簡單的例子來演示原理：http://jsfiddle.net/6eBd2/