1

我在一个纯 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;
}

任何关于如何让最右边的下拉菜单与屏幕右边缘对齐的建议都将不胜感激。

谢谢你的时间！

4

2 回答 2

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/

于 2013-05-04T18:21:51.370 回答
0 
.pit_toolbar_ul li:hover ul.alignRight li
{
  position:relative;
  left:-30px;
}

将此类添加到您的样式表中，这可能会对您有所帮助。我已经定位了你的下拉菜单li。

于 2013-05-04T18:24:03.710 回答