Space 在顶部和子导航之间

Question

我创建了一个带有子导航的导航，请参阅 JSFiddle with subnavigation。我有一个问题，在黄色背景的顶部导航和红色背景的子导航之间，我想用 1px solid white 的距离来分隔这两个区域。目前使用这个 CSS 定义

html, body {
  background-color: green;
}

我尝试在 <nav class="top-bar" data-topbar> 周围放置另一个 div 并设置 background-color: white; 但没有成功。

目标是在 .top-bar 区域下方始终有一条 1px 的实线。因此，当没有显示子导航时，请参阅 JSFiddle without subnavigation，也应该有此分隔符。我尝试用

实现它

.top-bar {
  background: yellow;
  border-bottom: 10px solid white; /*10px only to see that the border is inside the box*/
}

但是边框不在黄色 top-bar 框的外面，它在里面，这是我不想拥有的。另外，最好有一个组合，这样 top 和 sb 导航之间的 1px 白色 space 始终存在。

Answer 1

您可以在导航栏上使用带有 1 像素额外高度的白色边框底部：

.top-bar { height:71px; border-bottom:1px solid #fff; }

Answer 2

将外框阴影添加到顶栏。像这样：

.top-bar{
 background: yellow;
 box-shadow:0 0 1px #fff;
}

Answer 3

Working demo

您的边框解决方案几乎是正确的，只需更改 box-sizing 属性，这样边框就不会放在 div:

内

.top-bar {
    background: yellow; border-bottom: 10px solid white;
    box-sizing: content-box;
}

这是默认值，但您包含了使用 box-sizing: border-box; 覆盖此值的 Foundation。

Answer 4

在 .menu-center .active > a:before, .menu-center .active > a:after 和

上添加 Z-INDEX

    ul.sub-menu {
        background-color: red;
        display: block;
        left: 0;
        border-top: 1px solid #FFF;
        position: absolute;
        right: 0;
        text-align: center;
        top: 100%;
    }

http://jsfiddle.net/aytaxykf/12/

Space 在顶部和子导航之间

Space between top and sub navigation

html

css

navigationbar

Working demo