html - Show border triangle in navbar using CSS -

i trying create nav bar arrow under item hovered upon. here's trying make:

for arrow have used pseudo elements before , after. here of code:

body {    background: #ffffff;    color: #ffffff;    margin: 0px;    padding: 0px;    height: 100%;  }  .clear {    clear: both;  }  .page-wrap {    width: 980px;    margin: 0px auto;    height: 100%;  }  #main-menu {    background: white;    height: 55px;    width: 100%;    padding: 0px;    margin: 0px;    border-bottom: 1px solid black;  }  ul {    font-family: arial, verdana;    font-size: 18px;    margin: 0;    padding: 0;    list-style: none;  }  ul li {    display: block;    position: relative;    float: left;  }  li ul {    display: none;  }  ul li {    display: block;    text-decoration: none;    color: black;    padding: 0 9px 0 9px;    background: white;    margin-left: 1px;    white-space: nowrap;    line-height: 55px;    font: 18px;    font-family: arial, helvetica, sans-serif;    outline: none;  }  ul li a:hover {    color: black;  }  #menu a:hover:after {    content: "";    position: absolute;    top: 40px;    left: 50%;    margin-left: -15px;    width: 0px;    height 0px;    xxmargin: 0px auto;    border-left: 15px solid transparent;    border-right: 15px solid transparent;    border-bottom: 15px solid black;  }

<header id="main-menu">    <div class="page-wrap">      <ul id="menu">        <li><a href="#">recommended</a></li>        <li><a href="#">recent</a></li>      </ul>    </div>  </header>

fiddle link

the arrows black in color, because of border color. how show borders of arrow?

just add before pseudo element add :after

#menu a:hover:after {   content: "";   position: absolute;   top: 41px;   left: 50%;   margin-left: -15px;   width: 0px;   height 0px;   margin: 0px auto;   border-left: 15px solid transparent;   border-right: 15px solid transparent;   border-bottom: 15px solid white; } #menu a:hover:before {   content: "";   position: absolute;   top: 40px;   left: 50%;   margin-left: -15px;   width: 0px;   height 0px;   margin: 0px auto;   border-left: 15px solid transparent;   border-right: 15px solid transparent;   border-bottom: 15px solid black; } 

and have updated pen please check

http://codepen.io/anon/pen/voxmgz