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

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;
    }