Change height-top of item when hover

Question

I want to create a menu. When I hover, height-top of item will change like

Answer 1

A similar effect can be achieved using negative margins to move the element up, then padding to move the text back to its original position.

#menu a:hover {
    margin-top: -10px;
    padding-top: 10px;
    background-color: #6666AA;
}

Example: http://jsfiddle.net/bwQCL/1/