need CSS help for unordered list
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;
}
Just to be certain, I usually apply it to the li
s 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.
I don't see any bullets either. maybe try a full refresh: CTRL+F5 or CTRL+R And you may try this css
#nav ul li{ list-style: none; }
It works. You may have another rule that cancels out the #nav ul. You can probably test it by adding
body #nav ul
This is what I use for my horizontal menu bar using CSS. I've never had any problems with it.
#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;
}
精彩评论