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

Recommended Answers

All 3 Replies

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

Excellent, Thank you!
That did it.

Thanks,
John

cool. Glad to help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.