title: CSS: changing the color of a bullet in a list?
body: <p>I have a problem with changing the color of a bullet in a list.</p>
  
  <p>So I have a list inside a <code>&lt;nav&gt;</code> tag in my HTML file:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;nav id="top-menu"&gt;
      &lt;ul&gt;
          &lt;li&gt; &lt;a href=""&gt;Home&lt;/a&gt; &lt;/li&gt;
          &lt;li&gt;&lt;span&gt; &lt;a href=""&gt;Products&lt;/a&gt; &lt;/span&gt;&lt;/li&gt;
          &lt;li&gt; &lt;a href=""&gt;Statistics&lt;/a&gt; &lt;/li&gt;
          &lt;li&gt; &lt;a href=""&gt;Countries&lt;/a&gt; &lt;/li&gt;
          &lt;li&gt; &lt;a href=""&gt;Settings&lt;/a&gt; &lt;/li&gt;
          &lt;li&gt; &lt;a href=""&gt;Contacts&lt;/a&gt; &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>So as you can see my <code>&lt;nav&gt;</code> tag has an <code>id="top-menu"</code>. And one more thing:</p>
  
  <pre><code>&lt;li&gt;&lt;span&gt; &lt;a href=""&gt;Products&lt;/a&gt; &lt;/span&gt;&lt;/li&gt;
  </code></pre>
  
  <p>Here you can see that I put a <code>&lt;span&gt;</code> tag inside my bullet.</p>
  
  <p>Here is my CSS file:</p>
  
  <pre class="lang-css prettyprint-override"><code>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 a {
      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; }
  </code></pre>
  
  <p>Then I add this:</p>
  
  <pre class="lang-css prettyprint-override"><code>#top-menu ul li span {
      color: black;
  }
  </code></pre>
  
  <p>The problem is it doesn't change anything.</p>
  
  <p>In other words for now every bullet in my navigation menu is white but I want to make "Products" black.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Thanks.</p>