Html 动态宽度CSS下拉子菜单：如何左对齐？

使用CSS很容易显示LI>UL子菜单：

.menu ul { padding-left: 0px; }
.menu li { list-style-type: none; display: inline-block; padding-left: 0px; margin: 1px; background: #ddd; width: 100px; }
.menu li ul { display: none; }
.menu li:hover > ul { display: block; position: absolute; background: #000; }
.menu li:hover > ul li { display: block; background: #bbb; width: auto; }

在这种情况下，子菜单的大小会自动调整为内容的宽度。子菜单在父LI元素的左侧对齐

假设我想将子菜单向右对齐，因此右侧应该与父级LI的右侧对齐。我可以通过固定子菜单的宽度来实现这一点，并使用它（假设父LI的宽度为100px）：

但是你不能再使用灵活的宽度子菜单了。此外，还需要知道父LI的宽度

JS Fiddle最能解释我的问题：

---

任何人都知道一种方法，使子UL的右侧与父LI的右侧对齐，而不需要固定的子菜单宽度，并且允许子菜单宽度大于父LI？

一个好方法是放置

。菜单LI{position:relative；…}

因此，当子元素的

位置

属性设置为

绝对

时，子元素将相对于父元素放置。然后从

#菜单左li:hover>ul

选择器中删除

width

属性，并在其中添加

right:0

更新。要使子项大于其父项（如注释中所要求的），请按如下方式设置.menu li ul selector的属性：

.menu li ul { display: none; min-width:150px; }

---

参见此处（更新）。

根据评论/请求，以下是原始

CSS

代码的编辑版本，以反映所需结果：

/* apply to both */
.menu ul { padding-left: 0px; }
.menu li { list-style-type: none; display: inline-block; position: relative; padding-left: 0px; margin: 1px; background: #ddd; }
.menu li ul { display: none; }
.menu li:hover > ul { display: block; position: absolute; background: #000; right: 0; }
.menu li:hover > ul li { background: #bbb; white-space: nowrap; }

---

比如？你已经链接到我原来的JSFIDLE，我想…；）再试一次，谢谢。您已经提出了与下面的@amesshel相同的解决方案。正如我在那里回答的那样，在我最初的小提琴中，子菜单可能比父李更宽。您的解决方案可行，但禁用了这种可能性。你知道不破坏这种可能性的方法吗？这是另一种尝试。这就是你想要的？很有趣，谢谢。但是，这样子菜单宽度是否可能大于父LI宽度？您所说的“更大”宽度是什么意思？此外，这不是另一点吗？我的意思是，在我最初的小提琴中，子菜单可以比父李更宽。您的解决方案可行，但禁用了这种可能性：-）。好的，那么您想要一个具有最小值的灵活宽度？更新了anwser。

/* apply to both */
.menu ul { padding-left: 0px; }
.menu li { list-style-type: none; display: inline-block; position: relative; padding-left: 0px; margin: 1px; background: #ddd; }
.menu li ul { display: none; }
.menu li:hover > ul { display: block; position: absolute; background: #000; right: 0; }
.menu li:hover > ul li { background: #bbb; white-space: nowrap; }