JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu_wrap">
    <div id="arrow"></div>
    <ul id="nav">
        <li><a href="index.html" title="Start" class="current_page_item">Start</a>
        </li>
        <li><a href="about.html" title="Über mich">Über mich</a>
        </li>
        <li><a href="philosophie.html" title="Philosophie">Philosophie</a>
        </li>
        <li><a href="referenzen.html" title="Referenzen">Referenzen</a>
        </li>
        <li><a href="vertrieb.html" title="Vertrieb">Vertrieb</a>
        </li>
        <li><a href="coaching.html" title="Coaching">Coaching</a>
        </li>
        <li><a href="kontakt.html" title="Kontakt">Kontakt</a>
        </li>
        <li><a href="blog.html" title="Blog">Blog</a>
        </li>
    </ul>
</div>

CSS

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#menu_wrap {
    border: 1px dotted blue;
    padding: 5px;
}
#nav {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    position: relative;
}
#nav li {
    display: inline-block;
    margin-right: 15px;
}
#nav li:last-child {
    margin-right: 0px;
}
#nav li a {
    color: #444;
    text-decoration: none;
}
#arrow {
    background-color: red;
    background-size: 25px 35px;
    height: 35px;
    width: 25px;
    margin-bottom: 10px;
}

JavaScript

$(document).ready(function() {
    $('#nav li').mouseover(function() {
        var pos = $(this)[0].offsetLeft;
        pos = pos + Math.floor((($(this).css('width').replace('px', '') * 1) / 2));
        pos = pos - Math.floor(($('#arrow').css('width').replace('px', '') * 1) / 2)
        
        // Reset all colors
        $('#nav li a').css('color', '#444');
        
        // Animte the arrow
        $('#arrow').animate({
            'margin-left': pos + 'px'
        }, 250);
        
        // Change the color
        $('a', this).css('color', 'orange');
    });
});