working with active and hover links in css?

I have this li list, but I want to k开发者_Python百科now how to have the current page link have a background of white (li:active)

CSS:

#layout-three-liquid2 #section-navigation ul
{
    margin: 0;
    padding: 0;
}

#layout-three-liquid2 #section-navigation ul li
{
    margin: 0 0 0em;
    padding: 0;
    list-style-type: none;
}
#layout-three-liquid2 #section-navigation ul li:hover{

    background-color:white;



}
#layout-three-liquid2 #section-navigation ul li a:active{

    background-color:white;



}

HTML:

<ul>
   <li><a active="current" href="#page1">Home</a></li>
   <li><a href="#page3">Replies</a></li>
</ul>

But its not working, how can I solve this?

Your code li:active isn't valid/correct. You need to specify a class and the link in your CSS like this:

#section-navigation ul li a.current {
  background-color:white;
}

You can't do <a active="current">

because active isn't a valid attribute of the <a> element.

try using class=current instead.

then in your css you can target the element with

#layout-three-liquid2 #section-navigation ul li a.current {
    ...
}

You're abusing CSS pseudo-classes. :active and :hover are special values, those are used when the link is clicked (has the focus) and when the user moves the mouse pointer above it.

CSS classes should be used instead:
CSS:

#layout-three-liquid2 #section-navigation ul li a.current{

    background-color:white;
}

HTML:

<ul>
   <li><a class="current" href="#page1">Home</a></li>
   <li><a href="#page3">Replies</a></li>
</ul>

Note that :active doesnt mean the page you are currently on, it just means that the link is being clicked. (It might works in framesets also)

You have to do some server side scripting to set the class to link_active or something like that.