Need CSS help for an unordered list

Question

I am trying to create a basic navigation bar using an unordered list, but for some reason I cannot get the bullets to leave.

I was looking for a solution on Google, and it seems to me that it SHOULD work, but I think that I could ruin something that is not related to the ul style, which in turn prevents 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

To be sure, I usually apply it to li 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 the list item and execute the check item. From there, you can see the styles that actually apply to it and where they come from, which ones redefine, etc.

Most likely, what happens (with a different answer and comment) is that you have a different style, due to which bullets appear - this is where firebug really helps you.

Answer 2

I don’t see bullets either. maybe try a full update: CTRL + F5 or CTRL + R And you can try this css

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

Answer 3

It works. You may have another rule that cancels #nav ul. You can probably check it out by adding

 body #nav ul 

Answer 4

This is what I use for the horizontal menu bar using CSS. I have never had any problems with this.

  #nav { padding-bottom: XXpx; margin:0px auto; } #nav ul { list-style:none; padding: XXpx; margin: XXpx; } #nav ul li { float:left; } #nav span { position:absolute; left:-9999px; }