How to give a different color to a selected list item with CSS?

Question

I know this question has been asked so many times before. But I just can't find the right trick for my code. I want a different color for my active list item in the navigation bar. Obviously. Silly little thing. I know. But please try to help. Here's my HTML code: ```

``` and Here's the CSS file: ``` #container { position: relative; top: -2em; z-index: 2; width: 1200px; margin: auto auto; } #nav { position: relative; float: left; margin-left: 400px; } #nav li { list-style: none; float: left; border-right: 1px solid #afc4cc; } #nav li a { position: relative; z-index: 2; float: left; padding: 5px 45px; font-size: 15px; font-weight: bold; font-family: helvetica, arial, sans-serif; text-decoration: none; color: #39ae…

Accepted Answer

There's something wrong with your CSS code. Just replace this:

```
 ul#nav li a:hover,ul#nav li a:active{    
}
```

with this:

```
 ul#nav li a:hover,ul#nav li.active a{
 // here styling 
}
```

and you are good to go. You just made a mistake while calling the active class in CSS.

How to give a different color to a selected list item with CSS?

Solution

Problem