2013-05-04 74 views
1

我在定位純CSS驅動下拉菜單上掙扎:我的左手邊選項工作正常 - 而且此代碼基於我在網上找到的代碼 - 它工作好嗎。下拉UL LI元素裁剪屏幕的CSS對齊方式

我想讓我的右手菜單下降,而不是截斷/屏幕 - 我相信我將需要使用相對定位和浮動權的組合,但嘗試了很多組合而沒有所需的效果。

我把我的代碼放到一個JSfiddle中以顯示一個實例(事實上它與我正在處理的內容幾乎完全相同) - 我已將一批css重置添加到頂部以使jsfiddle表現正常正確(在我的生活網站上我使用外部CSS重置)。

JS小提琴:http://jsfiddle.net/g7Lk7/1/

.pit_toolbar_ul ul{ 
    background:#fff; 
    background:rgba(255,255,255,0); 
    list-style:none; 
    position:absolute; 
    left:-9999px; 
    list-style-type:none; 
    margin: 0; 
} 

如何得到最右邊的下拉對準了對屏幕的右側邊緣的任何建議,將不勝感激。

謝謝你的時間!

回答

1

對於右側菜單項,您應該使用right: 0而不是left: 0。您可以修復它添加此樣式:

.pit_toolbar_ul li:hover ul.rightside { 
    left: auto; 
    right: 0; 
} 
.pit_toolbar_ul li:hover ul.rightside li { 
    margin-right: 0; 
} 

,並添加rightside類相應ul

http://jsfiddle.net/g7Lk7/2/

+0

非常感謝 - 完美的作品!我認爲我將不得不爲每個LI元素設置一個浮點數 – Paul 2013-05-04 18:24:04

0
.pit_toolbar_ul li:hover ul.alignRight li 
{ 
    position:relative; 
    left:-30px; 
} 

這個類添加到您的樣式表,這可能會幫助你。我已經定位您的下拉菜單li

+0

嗨3bu1 - 這對我的喜好來說有些過於冒險,這並不是真正的未來證明 - 我已經用jsfiddle演示了這一點(如果我添加了將來的菜單項我將不得不經常抖動-30px):http://jsfiddle.net/zerzY/1/ – Paul 2013-05-04 18:29:24