javascript - 在左侧显示子列表的 CSS 属性

Question

我有一个看起来像这样的菜单，将鼠标悬停在“tanfa 演示示例”上时，子列表出现在 RHS

问题是，在我的情况下，整个菜单都在最右边。我希望子列表出现在 LHS 上。

我尝试过使用 CSS “left: 0; top: 0;” 属性，但这只会在其父元素的左上角显示子列表，它重叠如下，

在此处输入图像描述

我希望菜单从其父级的“左：0；上：0”开始，然后向左滑动。我更喜欢通过 CSS 的解决方案。

score 3 · Accepted Answer

尝试right: 100%代替left: 0，它基本上告诉您的菜单它应该将其左边缘定位到其父级的最左边缘。right: 100%应该告诉它把它的最右边与你的父菜单的最左边对齐。希望这可以帮助！

score 2 · Accepted Answer

如果我理解正确，要使子列表出现在父级的左侧，请将其left属性设置为-100%.

#menu ul ul ul {
position: absolute;
top: 0;
left: -100%;
width: 100%;
}

score 1 · Accepted Answer

可以试试这个：为子（弹出列表）设置负边距= 2 x父列表的边距

即：添加类似这样的内容以弹出列表。

{
    margin: 0 -300px; /* 0 denotes top and bottom margin : 0 */
}

PS：尽管查看您的代码，但不建议这样做。将需要对代码进行更多更改才能正常工作

score 1 · Accepted Answer

left:0表示你定义它的位置。那么，解决方案是什么，而不是left:0你可以定义left:auto; . 像这样写：

#menu ul ul ul {
position: absolute;
top: 0;
left:auto;
right:100%;
width: 100%;
}

或删除left:0正如 jakee 已经解释的那样。

4 回答 4