html - 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>

对于水平 CSS 菜单，它在 jsFiddle 上运行良好，但是当我在我的站点中使用它时......它给了我列表的元素符号，请参见下图......

如何摆脱这些子弹

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