Changing the font color of a menu item li

advertisements

I have a li menu and the default text is set to white. I need one element of that list item to have a font of green. I created a special css class to assign the color of the list item as green, but it doesn't work. I tried to set the style of the item to have a color of green for the font and that doesn't wory either. Any help would be appreciated!! Here is the code for the li item.

   <div id="navmenu">
        <ul id="menu">
        <li id="home" style="width: 10%; border-top-left-radius: 10px; background-color:#cdced0; color:Green"><a href="#">THINK GREEN</a></li>
        <li id="flights" style="width: 10%; border-right: 2px solid white; border-top-right-radius: 10px"  ><a href="#">YOUR STYLE</a></li>
        <li id="events" style="width: 15%; border-right: 1px solid white; border-top-left-radius: 10px" ><a class="current" href="#">INSPIRATIONS</a></li>
     </ul>
    </div>

#menu
{
width:85%;
list-style:none;
margin:0;
padding:0;
 margin:0;
text-decoration: none;
}

#menu li
{
 margin:0;
background-color: #d2232a;
float:right;
padding-top: 10px;

}

#menu li a
{

display:block;
height: 25px;

font-weight: bold;
color: White;
text-align: center;
text-decoration: none;
font-family: helvetica;

}
#menu li a:hover
{
background-color: #94191c;
color: #fff;
font-weight: bold;
font-family: helvetica;

}


You need to style the <a> element, not the <li>. Something like this:

#menu #home a {
    color:green;
}

Here is a fiddle, I didn't change anything, just added the CSS above to your posted code: http://jsfiddle.net/VfJaG/