Question

I am using this code:

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

For a Horizontal CSS menu which is working fine on jsFiddle but when i am using it in my site.. it is giving me bullets of the list, see the image below….

HOW TO GET RID OF THESE BULLETS

F1 F1

Help !!!

Any Key

Answer 1

Modify this style:

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

Like this: (You are missing list-style property)

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

More Info:

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