JSFiddle - React, Tailwind, and code Playground

HTML

<img class="up_arrow" src="http://lotex.kalicode.com/template/images/up_arrow.png" />
<div class="menu left"> <a href="#" class="active">About Us</a>
 <a href="#">The Dream</a>
 <a href="#">Events</a>
 <a href="#">Contact Us</a>
 <a href="#">Affiliates</a>

</div>

CSS

body {
    padding-top: 80px;
    background-color: #101010;
    padding-bottom: 80px;
}
.up_arrow {
    position: absolute;
    display: none;
}
.menu {
    background-color: #1c1c1c;
    min-height: 50px;
    line-height: 50px;
    vertical-align: middle;
}
.menu a {
    color: #fff;
    font-size: 13px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    vertical-align: middle;
    padding: 10px 20px;
}

JavaScript

(function ($) {
    $.fn.putMenuArrow = function () {
        $('.up_arrow').css({
            'display': 'block',
                'position': 'absolute',
                'left': ($(this).offset().left + $(this).outerWidth() / 2) - 17, // 17 is width of arrow image
            'top': $(this).offset().top - 19 //19 is height of arrow image
        });
    };
}(jQuery));

$('.menu a.active').putMenuArrow();

$('.menu a').click(function (e) {
    e.preventDefault();
    $('.menu a').removeClass('active');
    $(this).addClass('active');
    $(this).putMenuArrow();
});