Html 活动菜单项上指向下方的箭头

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

到目前为止，这就是我所拥有的

我的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;
}

请检查此项：。以下是我添加的额外样式：

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;
}

---

CSS代码片段答案：正在运行：

完整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
}

---

你有没有看过这个问题：

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
}