css - 为什么在:hover上更改

我正在制作带有浮动菜单项的菜单。

我想要的是始终在顶部悬停10 px，而不要悬停。

我的HTML：

<div id="menu">
    <div class="menuitem">
        Home
    </div>

    <div class="menuitem">
        Item2
    </div>

    <div class="menuitem">
        Item3
    </div>

    <div class="menuitem">
        Item4
    </div>
</div>

我的CSS：

#menu
{
    margin:0 auto;
    background-color:#B89470;
    height:50px;
    text-align:center;
}

.menuitem
{
    font-weight:bold;
    padding-top:10px;
    height:50px;
    width:100px;
    float:left;

}

.menuitem:hover
{
    background-color:#abca9e;
}

所以我做了this。

但是对于某些情况，仅在：hover激活时才显示填充。

但是我已经设置了填充

.menuitemn

而不是

.menuitem：悬停

那么为什么当悬停不活动时为什么没有填充？

最佳答案

这是因为padding-top: 10px;在menuitem的高度上增加了10px，使其在60px的高度上。但是，#menu仍保持在50px且与10px重叠。我更改了#menu的高度以显示给您。

演示http://jsfiddle.net/6w5kz/1/

height:60px;

关于css - 为什么在:hover上更改，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20588019/