CSS Divs?

[Danny]

Hey,

I dont know css very well :cry:, can anyone tell me how i make the menu backgrounds chang colour on mouseover not just the link text?

<div id="bar">
<ul>
<li>
<a href="#" accesskey="h"><span class="underline">Home</span></a>
</li>
<li class="active">
UK </li>
<li>
<a href="#" accesskey="s"><span class="underline">Spain </span></a>
</li>
<li>
<a href="#" accesskey="t"><span class="underline">Terms and Conditions </span></a>
</li>
<li>
<a href="#" accesskey="c"><span class="underline">Contact </span></a>
</li>
</ul>
</div>

[the_pm]

There are a couple ways to do this. You can expand the size of each link to fill the entire area you want to chage color. That way, the color change is still being triggered by the link.

Or, you can use a JavaScript method to switch colors when you hover over a space. If IE was a smart browser, you wouldn't need JavaScript (the :hover pseudo-class would work just fine), but IE is stupid, so you have to resort to clunky JS tricks to ake this happen.

But the first method is really a good one. However much room isn't being used by the link text, try adding padding to the link to fill it. It'll take some trial and error, but it ought to work well for you.

[Danny]

ok cheers, watch this space, ill be back when i mess it up ;)

[Cameron]

div#bar ul li a {
display: block;
width: 180px;
height: 20px;
}
div#bar ul li a {
background-color: #EFEFEF;
}


There's an example of the CSS you can use. Hope it helps.

[the_pm]

I believe that second part should be
div#bar ul li a:hover {
background-color: #EFEFEF;
}
Just to clarify ;)

[Cameron]

I believe that second part should be
div#bar ul li a:hover {
background-color: #EFEFEF;
}
Just to clarify ;)

oops :oops: Indeed it should.