Doing some basic html/css. I was making a rudimentary navbar with floated links. After getting it working I was stuck with this problem, and so far have not come to a solution.

My links have these dots in them. As the picture shows.

![1](https://i1319.photobucket.com/albums/t678/shenk72/dots_zps85974838.png)

My code is simple:

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? And why don't they appear if I add more words/links to the list or I erase all but one item? It's odd. I must be missing something extremely embarrassing because this just seems odd.