将菜单下拉菜单向左移动答案

【问题标题】：move menu dropdown to left将菜单下拉菜单向左移动
【发布时间】：2013-04-10 16:35:03
【问题描述】：

我有带有下拉导航（子菜单）的顶部菜单，下拉菜单位于主菜单的右侧。

css:

ul.dropdown ul {
width: 220px;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}

如何将最后一个菜单的位置更改为左侧，因为如果我将鼠标悬停在最后一个菜单上，下拉菜单会带有水平滚动，因为右侧没有空间来显示菜单？

请帮忙

【问题讨论】：

你能设置一个小提琴来玩吗？
请接受我的第一个正确答案（其他人接受并尝试改进）以供将来的观众使用，谢谢！

标签： html css

【解决方案1】：

ul.dropdown li {
   position: relative;
}

ul.dropdown li ul {
   position: absolute;
   top: 20px; /* assign the correct value of the top line height */
   left: 0px;
}

这应该有效^^ 将position:absolute; 分配给具有position:relative 的元素的子元素时，绝对定位是相对于其父元素而不是主体。

我的错，不知何故用“最后一个孩子”过度阅读了最后一部分。

这可以工作：

ul.dropdown li:last-of-type ul {
   position:absolute;
   left:0px;
}

【讨论】：

【解决方案2】：

你可以用jquery来解决这个问题，试试这个

$(function(){
    $(".dropdown:last").css("left","-120px");
})

【讨论】：

【解决方案3】：

您应该使用last-child 选择器来设置right 属性而不是left：

.dropdown > li:last-child:hover ul {
    left: auto;
    right: 0;
}

您不提供小提琴，所以我设置了这个简单的示例来演示原理：http://jsfiddle.net/6eBd2/

【讨论】：