css水平导航菜单向右浮动，垂直子菜单与主菜单不对齐

Question

我在 css 中创建了一个水平导航菜单，向左浮动。它工作正常。

当我将 float 向右更改(并颠倒顶级 li 的顺序)时，一切都很好，除了子菜单向左移动了一点(因此不要与顶级菜单项垂直对齐).

我尝试更改 li:hover > .nav 中的左侧命令，但这没有帮助。任何人都可以看到需要更改什么才能使顶级导航项和子菜单中的项垂直对齐吗？

谢谢。

我的 CSS 是:

#nav, .nav, #nav .nav li { 
    margin:0px; 
    padding:0px; 
}

#nav li {
    float:right; 
    display:inline; 
    cursor:pointer; 
    list-style:none; 
    padding:10px 30px 10px 30px; 
    border:1px #000 solid;  
    position:relative;
    background: #990000;
}

#nav li ul.first {
    left:-1px; 
    top:100%;
}

li, li a {
    color:#fff; 
    text-decoration:none;
}

#nav .nav li { 
    width:100%; 
    text-indent:10px; 
    line-height:30px; 
    margin-right:10px; 
    border-top:1px #000 solid; 
    border-bottom:1px #000 solid;
    border-left:none; 
    border-right:none; 
    background:#990000;
}

#nav li a {
    display:block; 
    width:inherit; 
    height:inherit;
}

ul.nav { 
    display:none; 
}

#nav li:hover > a, #nav li:hover { 
    color:#990000; 
    background:#fff; 
}

li:hover > .nav { 
    display:block; 
    position:absolute; 
    width:200px; 
    top:-2px; 
    left:50%; 
    z-index:1000; 
    border:1px #000 solid; 
}

li:hover { 
    position:relative; 
    z-index:2000; 
}

#basic li {
    color:#000;
}

Answer 1

当从 float: left 切换到 float: right 时，是否将所有与左相关的属性都交换为右和从右到左？

例子:

• 用margin-right替换margin-left
• 交换值(value)观。 margin 1px 2px 3px 4px 变为 margin 1px 4px 3px 2px