Question

I am trying to create a basic navigation bar using an unordered list, but for some reason I can’t get the bullets to go away.

I have searched for a solution on Google and to me it seems like it SHOULD be working, but I think I might be messing up something that isn’t related to the style of the ul, which is in turn preventing the ul style from being applied.

Here is the relevant html:

<div id="nav">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="example.html">Examples</a></li>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>
</div>

and here is the CSS:

#nav ul
{
    list-style-type: none;
    position: absolute;
    top: 10px;
    right: 0;
    margin: 0;
    padding: 0;
}
#nav ul li
{
    float: left;
}
#nav ul li a
{
    display: inline;
    float: left;
    padding: 8px 5px 3px 5px;
    margin-right: 5px;
    background-color: #034a7f;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}
#nav ul li a:hover
{
    padding-top: 12px;
    background-color: #075a97;
}

Answer 1

Just to be certain, I usually apply it to the lis too:

#nav ul li
{
    list-style-type: none;
    float: left;
}

Something else to check is to use a tool like firebug for firefox and right-click on a list-item and do a ‘inspect element’. From there you can see the styles that are actually applied to it and where they stem from, which ones are overriding which, etc.

More than likely, what’s happening (with the other answer and comment) is that you’ve got some other style that’s making the bullets show up– which is where firebug will really help you out.