Hover color smaller than menu height
 

I wanted the page menu height to be more than the standard, so I used padding to increase it, through a trick I found here on the forum. However, now when I set a different hover color, the area that changes color is the same height as the menu would be without the padding. I tried adding the padding to the hover element itself (or whatever it's called), and decreasing margins, but that doesn't work. Colored border big enough to fill up the difference doesn't work either.

Any suggestions?

Screenshot: I'm using the juggledad's color menu cheat sheet, (although I've been fiddling with it so the colors aren't standard anymore) and you can see what I mean.

Can you supply a url? If not can you post the code you are using for the menu?

URL: http://www.playyourwordsright.com

Code for the menu:

/* ================================================ */
/* Page menu background */
/* ================================================ */
div#menu1 {
height: 38px;
margin-top:0px;
background-color: #262626;
}
/* ================================================ */
/* Page Menu item's background and border */
/* ================================================ */
div#menu1 ul.rMenu {
height: 38px;
background: green;
margin-top: 0px;
border: none 0px;

}
/* ================================================ */
/* Page Menu item */
/* ================================================ */
ul.rMenu li a:link,
ul.rMenu li a:visited,
ul.rMenu li a:active,
ul.rMenu li a:hover ,
ul.rMenu li {
background: yellow!important;
color: #000000 !important;
padding: 8px 5px;
margin-top: 1px;
}

ul.rMenu li a:active,
ul.rMenu li a:hover {
background: red!important;
padding: 8px 5px;
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

Try eliminating the height and just use padding on the following selector.

Brilliant! That worked like a charm, as long as I keep the !important tags on some things.

I know it's generally considered good practice to make sure the code runs well without !important tags, but is that doable with Atahualpa?

It depends. Sometimes I just don't want to take the time to look for the code I need to change and other times there is a default setting I need to override. Generally I like to use IDs to minimize the need for !important but again sometimes I just want a quick fix.