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

    CSS - How to align drop-down sub menu to the parent's right?

    How to apply CSS styling to elements created by jquery's append()?

    How do I vertically center my navigation bar?

    JSF - How can I format my global messages in in a visually appealing way?

    bootstrap collapse to show a div it work but how to make it didn't affect side items?

    How to correctly redefine the CSS settings for FireFox?

    How to get started creating CSS for given (dynamically generated) HTML?

    How to only change left padding in javafx css

    Show a
  • line like is hovered
  • How to dynamically change width of Div1 inside a scrollable Div2 to Div2's width

    How can I wrap this text so it doesn't overflow past the widget container?

    How to make tabs with html and css

    How to get innerHTML of a node using scrapy Selector?

    How to spread elements evenly (horizonatly)?

    How to make a responsive scrollbar?

    How to override\edit Zurb Foundation base CSS styles?

    How to prevent adding CSS 'class' properties

    How can I make each section fit within the li box?

    How to show hidden part of an image which is inside a fixed height div, using just the CSS?

    How do I make the Android WebView not ignore the 'height' css property?

    how to make a div stay in a div

    How to Dynamically create a CSS class using AngularJS

    How to save css stylesheet pointer on php session?

    CSS: how to make background on left and right of the content

    how to override min-width

    How to call a image class on a regular interval

    How to remove line break after DIV in CSS

    How do I add CSS (transition) to an item from a SVG file? [duplicate]

    How to add an image to a transparent box using css

    How to create rounded shapes with css or SVG