2

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

CSS：

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

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

请帮忙

4

3 回答 3

2 
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;
}
于 2013-04-10T08:23:54.077 回答
1

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

$(function(){
    $(".dropdown:last").css("left","-120px");
})
于 2013-04-10T08:25:23.907 回答
0

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

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

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

于 2013-04-10T08:34:22.210 回答