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

Help !!!

Any Key

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