Question

I have this horizontal menu. The menu looks like tabs and are 29px high. The image is set to <li> background image in CSS. And I set the hover also in CSS.
Now what I want is when we have a mouse over that the image moves upwards with 8px. Now it moves downwards.

CODE:

#nav li {
    float:left;
    list-style:none;
    width:116px;
    height:29px;
    background-image:url(images/nav/nav_btn.png);
    background-repeat:no-repeat;
    padding-right:10px;
    text-align:center;
    padding-top:8px;}

#nav li:hover {
    float:left;
    list-style:none;
    width:116px;
    height:37px;
    background-image:url(images/nav/nav_btn_active.png);
    background-repeat:no-repeat;
    padding-right:10px;
    text-align:center;
    padding-top:8px;
    padding-bottom:-8px;}

<div id="nav">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>

Answer 1

Reverse your padding on the li:hover

padding-top:-8px;
padding-bottom:8px;

EDIT: NOT! Of course, I don’t know where my brain was when I stated the above. There is no such thing as negative padding. I think this is what you desire:

#nav li:hover {
    float:left;
    list-style:none;
    width:116px;
    height:37px;
    background-image:url(images/nav/nav_btn_active.png);
    background-repeat:no-repeat;
    padding-right:10px;
    text-align:center;
    padding-top:8px;
    padding-bottom:0px;
    position: relative;
    top: -8px;
}