悬停时更改项目的高度 - 顶部

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/