向下指向活动菜单项的箭头

Question

我正在尝试创建一个菜单。在活动菜单项上应该有一个向下的箭头，看起来像这样

到目前为止，这就是我所拥有的 http://codepen.io/anon/pen/akcfe

我的CSS代码：

select{
  display:none;
}
nav {
margin: 0 auto; 
text-align: center;
background: #fff;
height:70px;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;

}

nav ul li {
float: left;
margin: 0;
padding: 0;

}

nav ul li a {
display: block; 
padding: 10px 7px;
width:80px;
color: #000;
text-decoration:none;

}
nav ul li~li { border-left: 1px solid #857D7A; }

nav .active a {

color:#fff;
}

Answer 1

请检查：http://codepen.io/fadyhasn/pen/sgLiy。这些是我添加的额外风格：

li.active:before {
    content: '▼';
    position: absolute;
    margin-top: -3px;
    margin-left: -5px;
    color: orange;
    font-size: 13px;
    transform: scale(2,1);
    -webkit-transform: scale(2,1);
    -moz-transform: scale(2,1);
    -ms-transform: scale(2,1);
    -o-transform: scale(2,1);
}

nav ul {
    border-top: 5px solid orange;
}

Answer 2

CSS代码段回答：在行动：http://jsfiddle.net/hba18byw/

nav .active:before{
  content: ' ';
  border:10px solid transparent;
  border-top:10px solid red;
  border-left:10px solid transparent;
  display:inline-block;
  height:0;
  width:0;
  position:absolute;
  margin-left:-10px
}

完整的CSS：

select{
  display:none;
}
nav {
margin: 0 auto; 
text-align: center;
background: #fff;
height:70px;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
background: rgba(148,148,149,1);
background: -moz-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(148,148,149,1)), color-stop(36%, rgba(192,192,192,1)), color-stop(100%, rgba(192,192,192,1)));
background: -webkit-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -o-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -ms-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: linear-gradient(to bottom, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#949495', endColorstr='#c0c0c0', GradientType=0 );
}

nav ul li {
float: left;
margin: 0;
padding: 0;

}

nav ul li a {
display: block; 
padding: 10px 7px;
width:80px;
color: #000;
text-decoration:none;

}
nav ul li~li { border-left: 1px solid #857D7A; }
nav .active:before{
content: ' ';
  border:10px solid transparent;
  border-top:10px solid red;
  border-left:10px solid transparent;
  display:inline-block;
  height:0;
  width:0;
  position:absolute;
  margin-left:-10px
}