Question

I’m trying to achieve a hover effect with a background with the menu items, but with the css I have things appear to be out of place. I’ve tried many different things and still can’t figure out how to have the menu items stay in place when on hover, and also not to have the text stick to the bottom on top of background.

http://youvisit.com/creative/FindYourFutureCampaign/html/

Answer 1

The problem is that by adding your left/right images (the ones with the rounded corners), you’re changing the width and height of the <li>. Since those images are 19px tall, you need to get the height of the <li> to be 19px. You can do this using line-height and height. After doing that, you’ll have to figure out how to vertically align the text in the <a>. Then, you need to adjust for the changes in width. You could do this by using left/right padding on the <a>, and then remove that padding on hover (the padding removed should equal the width of the left/right image).

This should get your pretty close. I didn’t test this in IE7/8.

ul.menuItems li {
    float: left;
    height: 19px;
    line-height: 19px;
    margin-right: 20px;
}
ul.menuItems li a {
    color: #000000;
    display: block;
    float: left;
    height: 19px;
    line-height: 19px;
    padding: 0 2px;
    text-decoration: none;
}
ul.menuItems li:hover a {
    background: url("../img/menuHoverCenter.png") repeat-x 0 0;
    padding: 0;
}
ul.menuItems li:hover:before {
    content: url("../img/menuHoverLeft.png");
    float: left;
}
ul.menuItems li:hover:after {
    content: url("../img/menuHoverRight.png");
    float: right;
}

Really, this is a bad design. You probably don’t need to add content on hover. How about using CSS3 border-radius to get your rounded corners. Then use either linear-gradient or a background image for your background. border-radius is not supported by all browsers, but it’s fairly well supported if you’re not worried about IE8 and lower: http://caniuse.com/#search=border-radius