Changing the color of a bullet in a list?

Question

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.

Answer 1

to style bullets you could try doing:

    ul { list-style: none; }

    li:before { content:"\2022 \00A0"; color: blue; }

DEMO

Answer 2

how about this post: How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags
excerpt:

li:before {
    content: "• ";
    color: red; 
}  

in your case

#top-menu ul li span:before {
    content: "• ";
    color: black; 
}
#top-menu ul li:before {
    content: "• ";
    color: someOtherColor; 
}

Update: adding a fiddle with red dots and a single black one, so you can easily switch the active one red/black demo fiddle I'm using a class to define the active item

#top-menu ul li.active:before { content: "• "; color: black; }
#top-menu ul li:before { content: "• "; color: red; }