CHANGING THE COLOR OF A BULLET IN A LIST?

john rob

Total Post:108

Points:756
Posted by  john rob
 1605  View(s)
Ratings:
Rate this:
Hi!

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.

  1. shreesh chandra shukla

    Post:105

    Points:735
    Re: Changing the color of a bullet in a list?

    Hi!

    you should to try this

    to style bullets you could try doing:

        ul { list-style: none; }

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

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!