html - CSS: changing the color of a bullet in a list? -

i have problem changing color of bullet in list.

so have list inside <nav> tag in 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 can see <nav> tag has id="top-menu". , 1 more thing:

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

here can see put <span> tag inside bullet.

here 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; }  #top-menu ul li {     display: block;     float: left;     max-height: 25px;     width: 100px;     margin: 0;     padding: 5px 0;     font-family: tahoma, sans-serif;     font-size: 20px;     text-align: center;     background-color: #696969;     text-decoration: none;     color: #ffffff;     border-bottom: #696969 solid 2px; }   #top-menu ul li a:hover { border-bottom: #ffffff solid 2px; } 

then add this:

#top-menu ul li span {     color: black; } 

the problem doesn't change anything.

in other words every bullet in navigation menu white want make "products" black.

what doing wrong?

thanks.

try way

#top-menu ul li   span  a{     color: black; } 

demo