CSS下拉菜单缩进上下拉

Question

的的jsfiddle是here

我想不通为什么会出现在下拉链接的“缩进”。请帮忙？我不是这方面的专家，所以这让我感到困惑。

#nav{ 
    list-style:none; 
    font-weight:bold; 
    margin-bottom:10px; 

    float:left; 
    width:100%; 

    position:relative; 
    z-index:99; 

} 
#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; 
} 
#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; 
} 

#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; 
} 
#nav li:hover a{ 
    background:#6b0c36; 
    text-decoration:underline; 
} 
#nav li:hover ul li a:hover{ 
    background:#333; 
} 

和html在的jsfiddle。

Answer 1

UL有一个默认的填充位置，所以项目符号点不会出现在列表之外。

只需将它的考虑因素添加到您的ul之中;

#nav ul { 
    margin: 0; 
    padding: 0; 
} 

JSFiddle

希望这有助于欢呼声。

Answer 2

10 PX的余量右引起该缩进

#nav li{ 
    float:left; 
    margin-right:10px; 
    position:relative; 
} 

尝试这种情况：

#nav li{ 
    float:left; 
    margin-right:0; 
    position:relative; 
}