JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://christophersowerby.com/extremes.js"></script>
<script src="http://www.thesearchengineoptimisationcompany.co.uk/themes/theme_by_chris_sowerby/js/gumby/libs/modernizr-2.6.2.min.js"></script>
<script src="http://www.thesearchengineoptimisationcompany.co.uk/themes/theme_by_chris_sowerby/js/html5shiv.js"></script>
<div id="navcontain">
<nav>
    <ul class="gallery" id="dropdown0">
        <li class="lvl1" data-sub="dropdown1"><a href="#">Mobile Database Acquisition</a></li>
        <li class="lvl1" data-sub="dropdown2"><a href="#">Mobile Billing Solutions</a></li>
        <li class="lvl1" data-sub="dropdown3"><a href="#">Mobile Advertising</a></li>
        <li class="lvl1" data-sub="dropdown4"><a href="#">Mobile Web</a></li>
        <li class="lvl1" data-sub="dropdown5"><a href="#">Loyalty</a></li>
        <li class="lvl1" data-sub="dropdown6"><a href="#">Creative Design</a></li>        
        <li class="lvl1" data-sub="dropdown7"><a>drop down link</a></li> 
    </ul>
    <ul class="gallery" id="dropdown1" data-parent="dropdown0">
        <li data-sub="dropdown8"><a href="#">inks 1</a></li>
        <li><a href="http://www.thesearchengineoptimisationcompany.co.uk/">second lvl dd1 links 2</a></li> 
    </ul>
    
    <ul class="gallery" id="dropdown8" data-parent="dropdown1">
        <li><a href="#">third lvl dd8 links 1</a></li>
        <li><a href="#">third lvl dd8 links 2</a></li>  
        <li><a href="#">third lvl dd8 links 3</a></li>     
    </ul>
    
    <ul class="gallery" id="dropdown2" data-parent="dropdown0">
        <li><a href="#">second lvl dd2 links 1</a></li>           
        <li><a href="#">second lvl dd2 links 2</a></li>  
        <li><a href="#">second lvl dd2 links 3</a></li>  
        <li><a href="#">second lvl dd2 links 4</a></li>  
    </ul>
    <ul class="gallery" id="dropdown3" data-parent="dropdown0">
        <li><a href="#">second lvl dd3 links 1</a></li>           
        <li><a href="#">second lvl dd3 links...

CSS

#navcontain {
    text-align:center;    
}
nav {
    position: relative;
    display: inline-block;
    top: 100px;	    
}
.gallery {
    display:none;
}
.gallery li {
	list-style: none;
}
.gallery a {
    width:198px;
	height:40px;
    text-decoration: none;
    line-height:1.5em;
	text-align:center;
    font-family: helvetica, arial;
    background-color: #FAD406;
    color: #B58D7B;
    font-size: 12px;
    font-size:18px;
    padding:15px;
}
.gallery a:hover {
    color: #00B3FF;
}
.gallery .current {
    margin-top: -326px;
    margin-left: -306px;
    position: relative;
    left: 50%;
    top: 50%;
    width: 612px;
}
.current {
    position: relative;
    left: 50%;
    top: 50%;
    margin-top: -264px;
    margin-left: -270px;
    width: 542px;
}

JavaScript

jQuery(function($) {
    
    $('.gallery').extremes({ diameter: 100 }).not(":eq(0)").hide();

    $(".gallery a").click(function(evt) {
        evt.preventDefault();

        var $gallery = $(this).closest(".gallery");
        
        var textCurrent = $(this).text();
        $(".current").text(textCurrent);
        $(".current").data("parent", $gallery.attr("id"));

        var newDropdownToDisplay = "#" + $(this).parent().data("sub");
        $gallery.hide();
        $(newDropdownToDisplay).show();
        
        
    });

    $(".current").click(function(evt) {
        var $parentGallery = $("#" + $(this).data("parent"));
        $(".gallery:visible").hide();
        $parentGallery.show();
        $(this).fadeOut(function() {
            var w = $(".gallery:visible").width();
            var h = $(".gallery:visible").height();
            $(this).css({
                width:w,
                height:h,
                "margin-top":-h/2,
                "margin-left":-w/2
            }).fadeIn();
        });
    });
    
});