下拉 UL LI 元素剪切屏幕的 CSS 对齐方式

Question

我正在努力定位纯 css 驱动的下拉菜单:我的左侧选项工作正常 - 此代码基于我在网上找到的代码 - 它可以正常工作。

我试图让最右边的菜单下拉，而不是被剪掉/屏幕 - 我相信我需要结合使用相对定位和向右浮动，但尝试了很多组合都没有达到预期的效果。

我已将我的代码放入 JSfiddle 中以展示一个实际示例(事实上它与我正在处理的几乎相同)- 我在顶部添加了一批 css 重置以使 jsfiddle 正常运行(在我的实时网站上，我正在使用外部 css 重置)。

JS fiddle :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;
}

如有任何关于如何使最右边的下拉菜单与屏幕右边缘对齐的建议，我们将不胜感激。

感谢您的宝贵时间!

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

并在相应的ul上添加rightside类。

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