This is my first attempt at rollover buttons. I've used the technique where you have both states in one graphic and slide it up and down. I using only one graphic and trying to have the text generated from the HTML markup.

It is looking pretty much how I want it to, however you only get the hover effect when your mouse cursor is exactly over the text.

I have spent hours trying to figure out how to make the hover be the entire button area. Someone please take pity on me and give me some advice!

www.amgdraftinganddesign.com

Thanks!

~Bee

This code is embarrassing, but every time I try to clean it up the whole thing breaks. I tried the display block and nothing changed.

{
width:728px;
height:54px;
background: transparent url(images/BlackGreyButtons.gif) repeat-x;
background-position: 0 0;
background-color: black;
overflow: hidden;
position: relative;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 54px;
z-index: 1;
border-bottom: 1px;
border-bottom-color: #626262;
border-style: solid;
text-decoration: none;
cursor: pointer;
}ul{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
clear: left;
text-decoration: none;
}ul li{
display: block;
height: 54;
float: left;
text-align: center;
padding: 0;
margin: 0;
text-decoration: none;
}

#cssMenu

ul li a:link span{
color: white;
background-color: transparent;
text-decoration: none;
line-height: 77px;
font-weight: bold;
border: 0;
}

#cssMenu

</ul></div>