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/

Answer 2

pls see my solution, it works well in ie6+, firefox, chrome and so on. Online demo: http://jsbin.com/oTOv/1/

*{margin:0; padding:0;}
    #menu ul {
        margin: 50px 0 0;
        padding: 0px;
        list-style-type: none;
    }
    #menu li {
        float:left;
    }
    #menu a {
        display: block;
        width: 8em;
        height:20px;
        line-height:20px;;
        color: white;
        background-color: #000099;
        text-decoration: none;
        text-align: center;
    }

    #menu a:hover {
        position:relative;
        height: 30px;
        line-height:30px;
        background-color: #6666AA;
        margin-top: -10px;
        background-color: #6666AA;
    }