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

【问题标题】：css horizontal nav menu float right, vertical sub-menus not aligned with main menucss水平导航菜单向右浮动，垂直子菜单与主菜单不对齐
【发布时间】：2012-09-21 04:57:45
【问题描述】：

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

当我将浮点数更改为右（并反转顶级 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;
}

【问题讨论】：

标签： css menu nav

【解决方案1】：

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

例子：

将margin-left 替换为margin-right
交换值。 margin 1px 2px 3px 4px 变为 margin 1px 4px 3px 2px

【讨论】：

【解决方案2】：

除了尝试上述答案之外，您还可以使用 position:relative 和 right 或 left 属性来碰撞子菜单。无论您指定多少像素，它们都会相对于它们自然落下的位置移动菜单。

【讨论】：