下拉列表中的CSS下拉菜单缩进

时间:2022-09-05 18:52:34

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

JSFiddle

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

JSFiddle

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