JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li><a href="#">Nav 1</a></li>
        <li><a href="#">Nav 2</a></li>
        <li class="dropdown">
            <a href="#">Nav 3</a>
            <ul class="sub-menu">
                <li><a href="#">Nav 3.1</a></li>
                <li class="dropdown">
                    <a href="#">Nav 3.4</a>
                    <ul class="sub-menu">
                        <li><a href="#">Nav 3.4.1</a></li>
                        <li class="dropdown">
                            <a href="#">Nav 3.4.2</a>
                            <ul class="sub-menu">
                                <li><a href="#">Nav 3.4.2.1</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Nav 3.5</a></li>
            </ul>
        </li>
    </ul>
</nav>
<div style='margin-top:30px;'>
Lorem ipsum dolor sit amet, eum ad delectus scripserit. Et cum graeco consectetuer. Te ius alii nostrum. Sea omnes argumentum ex. Cum habeo idque docendi eu, primis singulis democritum ne sed. Ei dolor graeci eam. Eu altera vivendo his, ferri nostrud antiopam usu et.

Ius tibique legendos in. An eum choro contentiones, mazim nihil eruditi qui in. Eu mei ridens recusabo deterruisset. Ad mei reque iudico constituto. Ex duo corpora maiestatis elaboraret, est facete definiebas in. Quaeque diceret eu quo.
</div>
</div>

CSS

nav {
    background-color:rgb(255,100,100);
    padding:10px 0;
}
nav ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
nav ul li {
    display:inline-block;
    position:relative;
}
/* sub navigation */
nav li ul {    
    background-color:rgb(225,75,75);
    position:absolute;
    left:0;
    top:40px; /* make this equal to the line-height of the links (specified below) */
    width:200px;
}
nav li li {
    position:relative;
    margin:0;
    display:block;
}
nav li li ul {
    position:absolute;
    top:0;
    left:200px; /* make this equal to the width of the sub nav above */
    margin:0;
}
/* style all links */
nav a {
    line-height:40px;
    padding:0 12px;
    margin:0 12px;
}
nav a {
    color:#fff;
    text-decoration:none;
    display:block;
}
nav a:hover,
nav a:focus,
nav a:active {
    color:rgb(50,50,50);
}

/* style sub level links */
nav li li a {
    border-bottom:solid 1px rgb(200,50,50);
    margin:0 10px;
    padding:0;
}
nav li li:last-child a {
    border-bottom:none;
}

/* show arrows for dropdowns */
nav li.dropdown > a {
    background-image:url('../img/arrow-down.png');
    background-position:right 20px;
    background-repeat:no-repeat;
}

nav li li.dropdown > a {
    background-image:url('../img/arrow-right.png');
    background-position:right 16px;
    background-repeat:no-repeat;
}

/* hide sub menu links */
ul.sub-menu {
    display:none;
}

JavaScript

$(document).ready(function() {
    $( '.dropdown' ).hover(
        function(){
            $(this).children('.sub-menu').slideDown({
               duration: 200,
               step: function( now, fx ) {
                  if (fx.prop == 'height')
                     $('nav').css('margin-bottom', now);
               }
            });
        },
        function(){
            $(this).children('.sub-menu').slideUp({
               duration: 200,
               step: function( now, fx ) {
                  if (fx.prop == 'height')
                     $('nav').css('margin-bottom', now);
               }
            });
        }
    );
}); // end ready