[OVERFLOW:HIDDEN] 的替代方案

我目前正在我们的系统中工作，我发现很难在 HTML 中使用溢出。

请看看我的小提琴。并尝试把

overflow:hidden;

in

#nav-holder{
background: #333333;
padding-left: 30px;
padding-right: 30px;
}

http://jsfiddle.net/mjanthrax/L7vgnzvt/

您会注意到，添加后overflow:hidden在CSS中，导航菜单（悬停）不显示。

我该如何解决这个问题？

你会需要显示：内联块并设置width to 100%

内联块

该元素生成一个块元素框，该框将随 周围的内容就好像它是一个内联框（行为很多 就像替换的元素一样）

Change

#nav-holder{
    background: #333333;
    padding-left: 30px;
    padding-right: 30px;
}

to

#nav-holder {
    background: #333333;
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
    clear: both;
    display: inline-block;
}

Jsfiddle演示

然后你可能想添加*{box-sizing: border-box}在你的 CSS 顶部

完整演示

阅读更多关于盒子尺寸在这里

bonus