Arrow pointing downward on active menu item - html

Question

I 'm trying to create a menu. On the active menu item there should be a arrow pointing downwards which looks something like this
So far this is what I have
http://codepen.io/anon/pen/akcfe
My CSS code:
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

CSS snippet answer: in-action: 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
}
Full 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
}

Answer 2

Please check this: http://codepen.io/fadyhasn/pen/sgLiy. These are the extra styles which I've added:
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;
}