CSS水平菜单显示列表项目符号

Question

我正在使用此代码：

#menu {
    margin: 0;
    padding: 0;
    display: block;
    overflow: auto;
}

#menu li {
    margin: 1px;
    padding: 0;
    float: left;
}

#menu li a {

    display: block;
    padding: 2px;
    padding-left : 15px;
    padding-right: 15px;
    
    font-family: "Tahoma";
    font-size: 18px;
    color: #8f8b20;
    text-decoration : none;
}

#menu li a:hover {

    background-color: #dad68c;
    
    padding: 2px;
    padding-left : 15px;
    padding-right: 15px;
}

#menu li a:active {
    color: #ffffff;
    background-color: #dad68c;
    
    padding: 2px;
    padding-left : 15px;
    padding-right: 15px;
}

<ul id="menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">Foods</a></li>
 <li><a href="#">Gallery</a></li>
 <li><a href="#">Site Map</a></li>            
 <li><a href="#">About us</a></li>
  <li><a href="#">Contact us</a></li>

</ul>

对于在jsFiddle上正常工作的水平CSS菜单，但是当我在我的网站中使用它时...它给了我列表的子弹，请看下面的图像....

如何获得这些公告

F1 F1

帮助!!!

任意密钥

Answer 1

修改此样式：

#menu li {
    margin: 1px;
    padding: 0;
    float: left;
}

像这样:(你缺少list-style属性）

#menu li {
    margin: 1px;
    padding: 0;
    float: left;
    list-style:none; // this should remove the bullets
}

更多信息：

• http://www.w3schools.com/CSS/pr_list-style-type.asp

Answer 2

你尝试过list-style吗？

ul {
      list-style: none;
      ...
      ...
}

Answer 3

CSS代码缺少ul设置list-style: none

的规则

Answer 4

您需要通过将<li>添加到list-style: none;来覆盖默认的#menu样式。将其添加到#menu li将产生相同的效果，但需要3个额外的字符。 ：）

jsFiddle看起来很好的原因是他们应用于整个页面的CSS正在为你处理它。

详细了解list-style-type和简写list-style（上面使用过）。