导航栏：全宽二级

Question

我创建了一个带有一级和二级导航的导航栏。您可以在此处看到最新版本 JSFiddle（也许您必须增加包含输出的框架的宽度才能看到两级导航栏）。

目前，这个导航栏有几个问题：

第一级元素的宽度"Menu1"应该只是它需要的宽度，而不是第二级导航中元素的总宽度的宽度。
二级导航的宽度应为 100%，因此与黄色 header 相同，而不仅仅是二级导航栏元素的宽度。

所以导航栏应该如下图所示：

但是这个怎么实现，尤其是二级导航栏100%的宽度？我用 "Using pseudo elements" 尝试了这个 CSS-Tricks: Full Browser Width Bars，因为我不想在

上全局使用这个定义

html, body {
  overflow-x: hidden;
}

非常感谢任何帮助！

Answer 1

这是你想要的吗http://jsfiddle.net/aytaxykf/5/ 我在你的造型之上添加了这个。所以你可能可以删除你那里的一些规则

.top-bar {
  position: relative;
}
.top-bar-section {
  height: 70px;
}
ul.sub-menu {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: blue;
  text-align:center;
}
ul.sub-menu li{
  display: inline-block;
  float: none;
}
.menu-center a {
  position: relative;
}

.menu-center .active > a:before {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -10px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent lime transparent;
}

导航栏：全宽二级

Navigation Bar: Second level with full width

html

css

navigationbar