CSS下拉菜单：如何使绝对定位的子导航线完美排列

Question

我正在使用绝对定位创建一个纯CSS下拉菜单，但是在使用主导航排列子菜单时出现问题。子导航背景颜色是稍暗的红色，当它们悬停在主导航中时，它与列表项目的背景颜色相匹配。问题是子导航没有正确排队。

我用我用来解释我的意思的代码创建了一个简单的jsfiddle。

http://jsfiddle.net/38Krm/

完整的代码在小提琴中，但这基本上就是我这样做的方式。

nav ul li {
    float:left;
    padding:21.5px 1%; /* 10px; */
    position:relative;
}

nav ul ul {
    display:none;
    position:absolute;
    top:100%;
    background-color:#B91428;
}

当主导航列表项目悬停在其背景上时，应该与子导航列表项目的背景完全对齐，但我似乎无法使其工作。任何帮助将不胜感激。

Answer 1

Demo Fiddle

将left:0添加到nav ul ul

nav ul ul {
    display:none;
    position:absolute;
    top:100%;
    background-color:#B91428;
    left:0;
}