css - ホバー時にアイテムの高さを変更する

Question

メニューを作りたい。ホバーすると、アイテムの高さが次のように変わります

しかし、本当の私のメニューのように

ここに私のjsfidがありますhttp://jsfiddle.net/8vyUg/

<div id="menu">
    <ul>
        <li><a href="#">Who</a></li>
        <li><a href="#">What</a></li>
        <li><a href="#">Where</a></li>
    </ul>
</div>

ありがとうございます！

Answer 1

同様の効果を得るには、負のマージンを使用して要素を上に移動し、パディングを使用してテキストを元の位置に戻します。

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

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