下拉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对齐方式

回答

相关问题