Question

我在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;
}

Answer 1

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

示例：

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

Answer 2

除了尝试上面的答案之外，您还可以使用position:relative以及右侧或左侧属性来突破子菜单。它们会移动菜单，但是你指定的像素数相对于它们自然落下的位置。

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

2 个答案: