Question

我正在制作一个包含浮动菜单项的菜单。

我想要的是在顶部，悬停和不悬停时始终有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。

但是对于某些情况来说，填充仅在显示时显示：悬停处于活动状态。

但是我在

中设置了填充

.menuitemn

而不是

.menuitem：悬停

那么为什么当悬停没有活动时，是否有任何填充？

Answer 1

这是因为padding-top: 10px;向menuitem的高度增加了10px，使其成为60px的高度。然而，#menu仍然保留在50px，重叠为10px。我改变了#menu的高度来向您展示。

DEMO http://jsfiddle.net/6w5kz/1/

height:60px;

Answer 2

建议的另一个解决方案是添加：

#menu {
  overflow: hidden;
  }

问题是，孩子.menuitem比#menu大，所以它溢出了它。这是因为box model，我真的建议你阅读。所以有几种方法可以解决它，一个是我指出的，另一个是@ Vector's而另一个没有设置#menu的高度所以它就像所需的一样高。

当您悬停cursor: pointer;时，我还添加了.menuitem，以便正确显示它是可点击的项目。

http://jsfiddle.net/franciscop/6w5kz/3/

为什么会改变：悬停

2 个答案: