下拉UL LI元素裁剪屏幕的CSS對齊方式

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

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

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

.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; 
}

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

謝謝你的時間！

來源

2013-05-04 Paul

對於右側菜單項，您應該使用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/

來源

2013-05-04 18:21:51 dfsq

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

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

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

來源

2013-05-04 18:24:03

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

下拉UL LI元素裁剪屏幕的CSS對齊方式

回答

相關問題