Hovering over links in sidebar - I want WHOLE background to change, not just text.
 

I'm trying to make it so that when you hover over a link in a sidebar widget, it changes the background of the entire <li> area where that link is as opposed to just the text of that link.

For example, I'm trying to do what they did in the right sidebar ("popular articles") here: http://www.copyblogger.com/

The whole area around the text is highlighted when you hover over a link. In my case, just the text itself is being highlighted when it's hovered over.

How do I make that happen?

I'm currently (and unsuccessfully) doing this:

#right ul li a:hover {
background: #f0f0f0;
}

Could you post a link to your site?

Try this instead.

Perfect, thanks!

Actually, one other follow up question if you have another second.

What you recommended made it so that the whole area's background changes when you hover over it. How would I make it so that the whole area is also clickable as part of the link?

Thanks again.

I fiddled with this for a bit stumbled on to a solution. Try taking out the li so the code looks like below. Be sure and have a space after ul.

Hmmm, it doesn't seem to work for me.

It just changes the background of the entire list and all of the items on it when any of the links are hovered over (as opposed to just the link that's being hovered over), and it still doesn't make the whole area clickable.

I'll leave it live on my site for a bit if you want to see what I mean.

Again, I appreciate the help big time.

You have to put a space between ul and :hover. you have ul:hover and it needs to be

Ah, I see what you're saying. The problem however is that I've put it like it should be:

#right ul :hover {
background: #f0f0f0;
}

with the space there in the css inserts box. For some reason, it's getting rid of that space on its own.

I kinda wondered if it would work. I guess the best solution is the first.

I hear ya. Thanks again for the help.