A Pen by Sam Matthews.

index.html

<ul>
  <li class="current">about</li>
  <li>work</li>
  <li>contact</li>
</ul>

Pure-CSS-Active-Menu-Item-Arrow.markdown

Pure CSS Active Menu Item Arrow

A Pen by Sam Matthews on CodePen.

License.

script.js

$('ul li').click(function() {
  $('.current').removeClass('current');
  $(this).addClass('current');
});

style.less

ul {
  li {
    display:inline;
    background-color:#e5e5e5;
    padding:20px 30px;
    position:relative;
    &:hover {
      background-color:#c0c0c0;
      cursor:pointer;
      &:after {
        border-top:#c0c0c0;
      }
    }
    &.current {
      &:after {
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 15px solid #e5e5e5;
        content: " ";
        position: absolute;
        bottom: -15px;
        left: 35%;
      }
    }
  }
}