JSFiddle - React, Tailwind, and code Playground

by Ashish Kasama

HTML

<ul class="nav">
    <li>
        <a href="#">Lorem Ipsum</a>
        <ul class="sub-nav">
            <li>
                <a href="#">Sub Nav 1</a>
            </li>
            <li>
                <a href="#">Sub Nav 2</a>
            </li>
            <li>
                <a href="#">Sub Nav 3</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Lorem</a>
        <ul class="sub-nav">
            <li>
                <a href="#">Sub Nav 1</a>
            </li>
            <li>
                <a href="#">Sub Nav 2</a>
            </li>
            <li>
                <a href="#">Sub Nav 3</a>
            </li>
        </ul>
    </li>
     <li>
        <a href="#">Sum</a>
            <ul class="sub-nav">
            <li>
                <a href="#">Sub Nav 1</a>
            </li>
            <li>
                <a href="#">Sub Nav 2</a>
            </li>
            <li>
                <a href="#">Sub Nav 3</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Lorem Lorem Ipsum</a>
            <ul class="sub-nav">
            <li>
                <a href="#">Sub Nav 1</a>
            </li>
            <li>
                <a href="#">Sub Nav 2</a>
            </li>
            <li>
                <a href="#">Sub Nav 3</a>
            </li>
        </ul>
    </li>
</ul>

CSS

.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

    .nav  > li {
        float: left;  
        margin: 0 10px 0 0;   
        position: relative;        
    } 

        .nav li:hover .sub-nav {
            display: block;
        }    
    
    .nav > li .sub-nav {
        margin: 0;
        padding: 0;
        width: 120px;
        position: absolute;
        z-index: 500;
        left: 0px;
        top: 32px;
        display: none;  
background: red;
    } 

    .nav > li .sub-nav li {
        float: none;    
text-align: center;    
    }

JavaScript

$(".nav > li > a").hover(function(e){
    var $el = $(this),
    elc = $el.width()/2,
    $subnav = $el.parent().find('.sub-nav'),
    subc = $subnav.width()/2;
    
    console.log($el.width());
    
    $subnav.css({ left: -(subc-elc)+'px' });
});