JSFiddle - React, Tailwind, and code Playground

by PHPsycho

HTML

<div class="headNavigation printHidden">

<ul id="main-nav" class="h v-drop"><!--  swicth class to "h v-drop" for drop downs  -->
    <li><a href="#">1</a>
        <ul>
            <li><a href="#">4-1</a>
                <ul>
                    <li><a href="#">4-1-1</a>
                        <ul>
                            <li><a href="#">4-1-1-1</a>
                                <ul>
                                    <li><a href="#">4-1-1-1-1</a>
                                        <ul>
                                            <li><a href="#">4-1-1-1-1-1</a>
                                            </li>
                                            <li><a href="#">4-1-1-1-1-2</a>
                                            </li>
                                            <li><a href="#">4-1-1-1-1-3</a>
                                            </li>
                                            <li><a href="#">4-1-1-1-1-4</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a href="#">4-1-1-1-2</a>
                                    </li>
                                    <li><a href="#">4-1-1-1-3</a>
                                    </li>
                                    <li><a href="#">4-1-1-1-4</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">4-1-1-2</a>
                            </li>
                            <li><a href="#">4-1-1-3</a>
                            </li>
                            <li><a href="#">4-1-1-4</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">4-1-2</a>
                    </li>
                    <li><a href="#">4-1-3</a>
                    </li>
                    <li><a...

CSS

/* desighn stuff */

#main-nav li
{
    background: #ddd;
}

#main-nav li:hover
{
    background: #eee;   
}
/* important stuff */

#main-nav ul
{
    display: none;
    position: absolute;
    z-index: 1;
}

#main-nav li
{
    position: relative;
}

#main-nav li a
{
    display: block;
    padding: 10px 20px; /* just to give some space */
}

#main-nav ul,
#main-nav li li
{
    width: 100%;    
}

#main-nav li:hover > ul
{
    display: block;
}

/* stuff to change display on hover */

.h li
{
    float: left;
    width: 15%;
}

.h li li
{
    display: block;
    float: none;
}

.v
{
    width: 200px    
}

.v li
{
    display: block;
}

.v li li
{
    display: block;
    float: none;
}

.v-drop ul
{
    left: 0;
    top: 100%;
}

.v-drop ul ul
{
    top: 0;
    left: 100%;    
}

.h-right ul
{
    left: 100%;
    top: 0;
}

JavaScript

var $menu = $('#main-nav.h');
    var targetW = $menu.width();
    var $topLIs    =    $menu.children('li');
   
    var liw = Math.floor( targetW / $topLIs.length );
    $topLIs.width( liw );

    $('#main-nav.h > li li').bind('mouseenter',function(){
        var $this = $(this);
        var lft = $this.offset().left - $menu.offset().left;
        if( (lft+(2*liw)) > targetW )
        {
            $this.find('ul').css({
                'left':'auto' ,
                'right':'100%'
            });
        }
        if( lft < liw )
        {
            $this.find('ul').css({
                'left':'100%' ,
                'right':'auto'
            });
        }
    });