CSS: The background image does not work on the hover button

I simply want to pass from top to bottom as a hover, but the buttom is not reacting when the mouse is on top.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style/menuStyle.css" type="text/css" charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
    <ul id="menu">
        <li><a href="http://google.com">Home</a></li>
        <li><a href="http://google.com">About</a></li>
        <li><a href="http://google.com">Info</a></li>
        <li><a href="http://google.com">Gallery</a></li>
        <li><a href="http://google.com">Forum</a></li>
        <li><a href="http://google.com">Blog</a></li>
    </ul>

</body>
</html>

CSS:

a {color:black; text-decoration: none; outline:none; float:left}
a:visited {color: black}
ul {list-style:none}

#menu a {display:block;
    width:100px;
    height:50px;
    background: url(../img/boton.png) top;
    text-align:center;
    line-height: 50px;
    display:inline}

#menu a:hover{ color:red;
            background:url(../img/boton.png) bottom}

Download the Project: http://gabrielmeono.com/menu.zip

You need to make a couple of adjustments to your CSS.

Remove the // comments. These do not work and break the CSS. If you need to use comments, use /* your comment here */.

You need to set the background-position as well as the background-repeat. By setting a -'ve background position, you move the background image up, thus bringing your image into focus. Also set no-repeat, just for safety.

You can read more about this technique at: http://css-tricks.com/158-css-sprites/

so this is the final CSS I came up with:

#menu a
{
    display:block;
    width:100px;
    height:50px;
    background-image: url(../img/boton.png);
    background-repeat: no-repeat;
    text-align:center;
    line-height: 50px;
    display:inline;
}

#menu a:hover, #menu a :active
{
    color:red;
    background-position: 0px -50px;
}

Related Articles