html - 定位第三级下拉菜单

Question

我在设计 CSS 下拉菜单的第 3 级时遇到问题。

我在这里有一个工作小提琴给你看：http: //jsfiddle.net/HdFaV/

如您所见，第一个菜单项 A 及其子级别能够很好地定位（忽略第 3 级与第 2 级菜单项的重叠）。但是，如果您尝试为第二个菜单项 XXXXXXXXX 设置第 3 级，则它的位置不正确。

我知道这个问题是由于下面代码中的margin-left

/* level 3+ list */
#nav ul ul
{
    margin-left: 50px;
    top: 0px;
}

有没有根据二级菜单项的宽度自动设置左边距？还是我必须为每个人手动设置左边距？如：

#nav ul ul:nth-child(1)
{
....
}

等等..？

谢谢你的帮助！

b0ssY

Answer 1

#nav ul ul
{
    left:100%;
    top:0;
}

不要使用左边距，而是使用 100% 定位，这将计算较高列表项的宽度。