Question

我正在尝试使用csswizardry

上找到的css创建一个下拉菜单

由于某种原因，子菜单不会自动对齐左边，我似乎无法找到问题。我认为这与

有关

#nav li:hover ul{ 
left:0;
}

或

#nav ul{
background:#fff; 
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;

但似乎无法找到它是什么。：（

这是我的代码：http://jsfiddle.net/gD5rJ/

有人能指出我正确的方向吗？

Answer 1

UL s默认40px左边距（或任何浏览器中的填充）。

#nav li ul {margin-left: 0; padding-left: 0;}

Answer 2

试试这个。我删除了边距值和左边填充值#nav li ul {margin：0; padding-left：0;}

Answer 3

将padding:0px添加到#nav li:hover ul

在JSFIDDLE

上查看

<强> CSS：

.container {
    width: 960px;
    margin: 0 auto;
}

#nav{
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
    float:left;
    width:100%;
}

#nav li{
    float:left;
    margin-right:10px;
    position:relative;
}
#nav a{
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
}
#nav a:hover{
    color:#fff;
    background:#6b0c36;
    text-decoration:underline;
}

#nav ul{
    background:#fff; 
    background:rgba(255,255,255,0);
    list-style:none;
    position:absolute;
    left:-9999px; 
}
#nav ul li{
    padding-top:1px; 
    float:none;
}
#nav ul a{
    white-space:nowrap; 
}
#nav li:hover ul{ 
    left:0;
    padding:0px;
}
#nav li:hover a{ 
    background:#6b0c36;
    text-decoration:underline;
}
#nav li:hover ul a{
    text-decoration:none;
}
#nav li:hover ul li a:hover{ 
    background:#333;
}

css下拉菜单：子菜单不会左对齐

3 个答案: