Today I dabbled in some basic HTML/CSS work. I was in the process of creating a simple navbar with floated links. Once I got it up and running, I encountered an issue that has me stumped, and I haven't been able to find a solution yet.
The problem lies with the dots in my links, as shown in the image below:
Here is the simple code I used:
HTML
<div id="nav-wrapper">
<div id="navbar">
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
</div>
and the CSS
#nav-wrapper {
background-color: black;
height: 40px;
width: 100%;
border-top: 2px solid gray;
border-radius: 0 0 5px 5px;
}
#navbar {
}
ul#nav li {
float: left;
font-family: sans-serif;
font-size: 18px;
text-decoration: none;
}
ul#nav * a {
width: 25px;
margin: 0 10px 10px 0;
}
My question is, what is causing these dots to appear? Furthermore, why do they disappear if I add more words/links to the list or if I delete all but one item? It's quite peculiar. I must be overlooking something incredibly simple, as this behavior seems unusual.