treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Multiple Header Anchor Tags?

  • 'Allo everyone. I have an issue. I want to take this and make it so each word in the menu is a separate color. I currently have an anchor tag:

    a {
        font-size: 1em;
        outline: none;
        text-decoration: none;
        color: #00AEEF;
    }
    

    And it is what is creating the cyan blue. How do I divide each menu item up and apply a different color to each one? Here is the HTML code generating the menu:

      <div id="menu-bar">
    
          <ul id="mt-main-nav">
              <li class="home"><a href="/">Home</a></li>
              <li class="literature"><a href="#">Graphic Novels & Written Novellas</a>
                  <ul>
                      <li class="feelgoodcandy"><a href="/feelgoodcandy/">Feel Good Candy</a></li>
                      <li class="gloom"><a href="/gloom/">Gloom</a></li>
                  </ul>
              </li>
              <li class="forums"><a href="/forums/">Forums</a></li>
              <li class="contact"><a href="/contact/">Contact</a></li>
              <li class="shop"><a href="http://www.zazzle.com/mintertweed/">Store</a></li>
              <li class="support"><a href="/support/">Support</a></li>
          </ul>
    
      </div> <!-- end menu-bar -->
    

    Thank you in advance!

    Edit: Sorry about the glitch with the menu-bar div. I apparently have to click "Code" twice for it to appear as code for all of you to see.

  • Use the classes that you already have on the list items. So for example:

    .home a {
        color: red;
    }
    .literature a {
        color: blue;
    }
    ...
    
  • The @joshuanhibbert example should work just fine. Just use the classes of the list itens on your css adding the anchor selector after as said by @joshuanhibbert and put the color that you want, the common properties as font-size, font-family and so on you can place on the #mt-main-nav a selector.

  • Thank you, both of you. Once I can figure out what is going on with my WampServer, I shall apply these changes.

  • @mintertweed I had problems this morning with Wamp. Turned out that I deleted the "testmysql.php" file. Another common issue is Skype running while starting Wamp.

  • @chrisburton, yep, I was running Skype. Sigh.