menu bar CSS active background color

Question

Hi guys i'm learning and progressing on CSS basics. I'm wondering how do you make the background of active menu bar set to orange? i tried

ul#mcolor li.active a {
    color: rgb(25, 25, 25);
    background-color: Black;
}

but it's not working. what do i need to add to my code to change the background color of avtive menu bar? Please point me to the right direction. Thanks in advance.

here's my code so far http://jsfiddle.net/blackknights/jADWj/embedded/result/ Active page is currently Home

Answer 1

Take a look at Is there a CSS parent selector? thread and you will find out there is no way to call the parent of an a tag, in your example.

So you need to add the active class to your li tag, instead of a and then make your CSS like this one.

#mcolor li.active {
    background: none repeat scroll 0 0 black !important;
}

I saw you used <font> tag with color. If you want to change the color property of your buttons with CSS, give the color to the a tag and avoid giving this to a <font>. Suggest you to take a look at W3Schools HTML tutorials.

Answer 2

You have to set the #active for the a element:

ul#mcolor li a.active {
background-color: orange;
color: Black;
}

In addition to that rgb(25, 25, 25) is a black color (and not a orange one).

See also http://www.colorcodehex.com/191919/.

Answer 3

There is way too much errors in example code. But for your current question:

ul#mcolor li.active a

you are using li.active but the active class are applied to a tag in your HTML.

Hope this will help...

Answer 4

Here is the fiddle which you looking for. http://jsfiddle.net/jADWj/4/embedded/result/

Just put active class to li. Thanks.