css - 为什么它在 :hover 上发生变化

Question

我正在制作一个带有 float 菜单项的菜单。

我想要的是在悬停时和非悬停时始终在顶部留出 10 像素的内边距。

我的 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:悬停

那么为什么悬停未激活时没有任何填充？

Answer 1

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

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

height:60px;