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/

Answer 2

请查看我的解决方案，它在 ie6+、firefox、chrome 等中运行良好。在线演示：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;
    }