Question

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

的CSS：

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

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

请帮忙

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

Answer 2

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

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

Answer 3

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

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

你没有提供一个小提琴，所以我设置了这个简单的例子来证明原理：http://jsfiddle.net/6eBd2/

将菜单下拉移至左侧

3 个答案: