导航栏：全宽度的第二级

Question

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

目前，我在此导航栏中遇到了几个问题：

1. 第一级元素的宽度＆＃34; Menu1＆＃34;应该只是它需要的宽度而不是第二级导航中元素总宽度的宽度。
2. 第二级导航应为宽度100％，因此与黄色标题相同，而不仅仅是第二级导航栏元素的宽度。

因此导航栏应如下图所示：

但是如何实现这一点，尤其是第二级导航栏的100％宽度？我用＆＃34;使用伪元素＆＃34;尝试了这个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;
}