CSS menu hover question

[John P]

Hi,

On my site ( http://www.js.excelitehost.com/ ) I just added a hover aspect to the menus so that when you hover the background changes.

Currently the only way that the hover effect will occur is if you place your mouse right on the link text.

What I'm wondering is: Is there a way with CSS to extend the hover switch out to the right so that if you hover anywhere on the "button" it will change.

Here is an example of the first link:

<div id="navbutton"><a href="index.html" >Home</a></div>

And here is the CSS governing them:

#navbutton {
	margin-left: 4px;
	margin-right: 4px;
	border-bottom: 1px dashed #FFF8DC;
	background: #e6e5c9;
}

#navbutton :hover {
	
	display: block;
	background: #F5F5DC;

}

Thanks,
John

[DaveSW]

try display: block on your #navbutton and #navbutton a
You may need to alter your other code to regulate the width it extends to.

[John P]

Excellent, Thank you!
That did it.

Thanks,
John

[DaveSW]

cool. Glad to help.