JSFiddle - React, Tailwind, and code Playground

by pradeep

HTML

<ul>
    <li>Menu1</li>
    <li>Menu2</li>
    <li>Menu3</li>    
    <li>Menu4</li>    
    <li>Menu5</li>        
</ul>    

<div id="marker">*</div>

CSS

li { float: left; padding: 10px; width: 100px; border: 1px solid blue; text-align: center; }
li.active { border: 1px solid red; }
#marker { position: fixed; }

JavaScript

$('li').mouseover( function() { 
    $('.active').removeClass('active');
    $(this).addClass('active');
    var top = $(this).offset().top + $(this).height() + 5;
    var left = $(this).offset().left + ($(this).width() / 2);
    $('#marker').stop().animate( { top: top, left: left  }, 2000 );
});