CSS Horizontal Menu is showing list bullets


Tags: html,css,menu,html-lists

Problem :

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

alt text

HOW TO GET RID OF THESE BULLETS

F1 F1

Help !!!

Any Key



Solution :

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:


    CSS Howto..

    How can I apply CSS to a link if at least one input is not original, and undo that change if all inputs are original?

    How to make shapes with CSS which have borders?

    show/hide div on click

    How to adapt height of an element to another in CSS

    How to prevent CSS hover style from firing unless hover time reached as defined in jQuery routine?

    Where and how do i call different CSS for different browsers in my MVC website?

    How to use the native browser outline in CSS?

    Devtools audit shows unwanted/injected css rules

    How can one create horizontal tree view using CSS and HTML?

    How to apply CSS to elements that have multiple classes?

    How can I use min-width 100% and still have expanding by content?

    How to load .css file from parent directory with .htaccess rule?

    How to do HTML/CSS form helpers/popover

    How can I make browser scale image frames according to CSS before loading actual images into frames?

    How to apply CSS to navigation bar with master pages?

    How to read all numeric values from within a file in php?

    How to implement multiple background-images for an id / class with the same CSS code?

    css: How to select first anchor tag inside table

    Rails How to include a scss file in a specific erb view? [duplicate]

    How To Set CSS Classes On HTML Tags Which Are Included In The Page With PHP Include's

    How to make jQuery add css dynamaically on window resize

    How to change lines in an angularJS+Bootstrap?

    how to align an 'a' element in html/css

    How to access an svg inner id and have CSS change the fill color of that id?

    How to align a menu bar using css and html? [closed]

    How to offset div columns in CSS grid system

    How to scroll an html element both horizontally and vertically with top and side labels scrolling correctly

    How to make interactive logo design without flash?

    Twitter widget covers up another div that might appear over it . How to make twitter widget appear under?

    CSS Z-Index: How to show element above parent's sibling? (and have cousin above parent)