Html 向左移动菜单下拉列表

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

css:

若我将鼠标悬停在最后一个菜单上，由于右侧并没有显示菜单的空间，那个么如何将最后一个菜单的位置更改为左侧

请帮忙

ul.dropdown li {
   position: relative;
}

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

当分配

位置：绝对时，^^^这应该有效

到具有

位置的元素的子元素：相对

绝对位置相对于其父元素，而不是主体

我的错，不知怎的，用“最后一个孩子”把最后一部分读过头了

这可能会起作用：

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

---

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

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

---

您应该使用

最后一个子项

选择器来设置

右

属性，而不是

左

：

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

---

您不提供小提琴，因此我设置了一个简单的示例来演示这一原理：

您可以设置一把小提琴来演奏吗？请接受我的第一个正确答案（其他人都接受并试图改进），以供未来的观众使用，谢谢！

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