0

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

当我将浮点数向右更改（并反转顶级 li 的顺序）时，一切都很好，只是子菜单向左移动了一点（因此不要与顶级菜单项垂直对齐）。

我尝试在 中更改 left 命令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;
}
4

2 回答 2

0

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

例子：

  • 替换margin-left为margin-right
  • 交换价值观。margin 1px 2px 3px 4px变成margin 1px 4px 3px 2px
于 2012-09-29T17:35:55.433 回答
0

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

于 2012-09-29T18:00:08.520 回答