I have a problem with changing the color of a bullet in a list.

So I have a list inside a <nav> tag in my HTML file: 

<nav id="top-menu">
    <ul>
        <li> <a href="">Home</a> </li>
        <li><span> <a href="">Products</a> </span></li>
        <li> <a href="">Statistics</a> </li>
        <li> <a href="">Countries</a> </li>
        <li> <a href="">Settings</a> </li>
        <li> <a href="">Contacts</a> </li>
    </ul>
</nav> 

So as you can see my <nav> tag has an id="top-menu". And one more thing: 

<li><span> <a href="">Products</a> </span></li> 

Here you can see that I put a <span> tag inside my bullet. 

Here is my CSS file: 

nav#top-menu {
    width: 100%;
    height: 33px;
    background-color: #696969;
    margin: 0;
    padding: 0;
} 
#top-menu ul {
    display: block;
    list-style-type: none;
    width: 600px;
    margin: 0 auto;
    padding: 0;
} 
#top-menu ul li {
    margin: 0;
    padding: 0;
} 
Then I add this: 
#top-menu ul li span {
    color: black;
} 

The problem is it doesn't change anything. 

In other words for now every bullet in my navigation menu is white but I want to make "Products" black. 

What am I doing wrong? 

Thanks.