在左侧显示子列表的 CSS 属性答案

【问题标题】：CSS property to show sublist on left side在左侧显示子列表的 CSS 属性
【发布时间】：2012-07-10 21:01:10
【问题描述】：

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

问题是，就我而言，整个菜单都在extreme right 上。我希望子列表出现在 LHS 上。

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

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

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

或删除 left:0 就像 jakee 已经解释的那样。

【讨论】：