Javascript 创建一个'；缺口'；在CSS中

我正在开发一个HTML5应用程序。此应用程序将有一个纯蓝色水平导航条。子导航项目将出现在其下方的另一个水平浅蓝色导航栏中。当用户单击导航栏或子导航栏中的某个项目时，我希望所选项目出现一个缺口，使其看起来像这样：

+---------------------------------+
|                                 |
| Item 1     Item 2     Item 3    |
|   ^                             |
+---------------------------------+
|                                 |
| Child 1     Child 2     Child 3 |
|               ^                 |
+----------------------------------
|                                 |
|  Content goes here              |
+---------------------------------+

目前，我的HTML如下所示：

<div class="row mainNav pad-1">
  <nav>
    Item 1&nbsp;&nbsp;&nbsp;Item 2&nbsp;&nbsp;&nbsp;Item 3
  </nav>
</div>

<div class="row subNav pad-1">
  <nav>
    Child 1&nbsp;&nbsp;&nbsp;<span class="sub-nav-arrow-up">Child 2</span>&nbsp;&nbsp;&nbsp;Child 3
  </nav>
</div>

.mainNav
{
    background-color: rgba(255, 255, 255, 0.7);
    line-height: 2.4rem;
    padding: 0rem 1.0rem;
}

.subNav
{
    background-color: #40566B;
    color: #000;
    line-height: 2.4rem;
    padding: 0rem 1.0rem;
}

div.sub-nav-arrow-up
{
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 12px solid #fff;
    font-size: 0;
    line-height: 0;
    text-align: center;
}

我的问题是，我的分数没有正确排列。我需要它与主导航水平条的底部对齐。我还需要将槽口与所选导航项目居中。我不知道如何在CSS中完成这两件事。我相信我的包装跨度是不正确的方法，因为它会导致导航条的大小增加。此外，通知未正确居中。我不知道该怎么办

有没有办法用纯CSS实现这一点？还是我必须设计一个JavaScript解决方案

---

谢谢大家!

您应该在css中使用适当的标记，而不是使用。使用jeremyasnyder的JSFIDLE代码，我构建了一个使用ul和li标记的示例。这仍然需要javascript来生成函数，但不依赖于

HTML

---

附加：我不知道您的项目是什么，但您可能希望查看可在所有设备上运行的响应菜单

您是否有机会在小提琴中设置到目前为止所拥有的内容？这是一个JSFIDLE，它似乎与您要查找的内容近似。。。不推荐使用非空格作为分隔符的菜单。。。但这也许能回答你的问题。我从.sub-nav-arrow-up中删除了几个项目，并将其从div更改为span.sub-nav-arrow-up。如果要将它们称为子元素，它们应该是父元素的子元素。在设置时，它们是同级元素

<p>Child 3 selected:</p>
<div class="row mainNav pad-1">
  <nav>
      <ul><li class="selected">Item 1</li><li>Item 2</li><li>Item 3</li></ul>
  </nav>
</div>

<div class="row subNav pad-1">
  <nav>
      <ul><li>Child 1</li><li class="selected">Child 2</li><li>Child 3</li></ul>
  </nav>
</div>

.mainNav { background-color:rgba(255, 255, 255, 0.7); line-height:2.4rem; padding:0rem 1.0rem; }
.subNav { background-color:#40566B; color:#000; line-height:2.4rem; padding:0rem 1.0rem; }
.mainNav nav ul li.selected {
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-bottom: 10px solid #40566B; 
    text-align:center;
}
.subNav nav ul li.selected {
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-bottom: 10px solid #fff; 
    text-align:center;
}
nav ul { padding:0;margin:0;list-style:none; }
nav ul:after { content:"";display:table;clear:both; }
nav ul li { float: left; margin: 0 10px;}