The jsfiddle is here
jsfiddle在这里
I cannot figure out why there is an 'indent' in the drop down links. Please help? I am not an expert at this, so this is confusing me.
我无法弄清楚为什么下拉链接中存在“缩进”。请帮忙?我不是这方面的专家,所以这让我感到困惑。
#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;
}
and the html
is in the jsfiddle.
并且html在jsfiddle中。
2 个解决方案
#1
1
UL
has a default padding so bullet points don't appear outside the list.
UL具有默认填充,因此项目符号点不会出现在列表外部。
Just add consideration for it to your ul
like;
只需添加对你的ul的考虑;
#nav ul {
margin: 0;
padding: 0;
}
Hope this helps, cheers.
希望这会有所帮助,欢呼。
#2
0
The margin-right of 10 px is causing the indent
10 px的边距权利导致缩进
#nav li{
float:left;
margin-right:10px;
position:relative;
}
Try this:
#nav li{
float:left;
margin-right:0;
position:relative;
}
#1
1
UL
has a default padding so bullet points don't appear outside the list.
UL具有默认填充,因此项目符号点不会出现在列表外部。
Just add consideration for it to your ul
like;
只需添加对你的ul的考虑;
#nav ul {
margin: 0;
padding: 0;
}
Hope this helps, cheers.
希望这会有所帮助,欢呼。
#2
0
The margin-right of 10 px is causing the indent
10 px的边距权利导致缩进
#nav li{
float:left;
margin-right:10px;
position:relative;
}
Try this:
#nav li{
float:left;
margin-right:0;
position:relative;
}