JSFiddle - React, Tailwind, and code Playground

by Gonzalo Guevara

HTML

<script src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js"></script>
<link rel="stylesheet" href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css">
<link rel="stylesheet" href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish-navbar.css">
<header>
    <!-- header -->
    <div class="header">
        <div class="contenedor">
            <div class="brand">
                <img src="images/brandDummy.png" alt="Logo" />
            </div>
            <div class="main-nav-block">
                <!-- main-nav -->
                <ul id="main-nav" class="sf-menu sf-navbar">
                    <li> <a href="#">Level One A <i class="fa fa-angle-down"></i></a>

                        <ul>
                            <li><a href="#">subitem 1a</a>

                            </li>
                            <li><a href="#">subitem 1b</a>

                            </li>
                            <li><a href="#">subitem 1c</a>

                            </li>
                            <li><a href="#">subitem 1d</a>

                            </li>
                        </ul>
                    </li>
                    <li class="ccurrent"> <a href="#">Level One B <i class="fa fa-angle-down"></i></a>

                        <ul>
                            <li> <a href="#">subitem 2a</a>

                                <ul>
                                    <li><a href="#">menu item</a>

                                    </li>
                                    <li><a href="#aba">menu item</a>

                                    </li>
                                    <li><a href="#abb">menu item</a>

                                    </li>
                                    <li><a href="#abc">menu item</a>

                                    </li>
                                    <li><a href="#abd">menu item</a>

                                    </li>
                             ...

CSS

.contenedor {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}
.brand {
    width: 220px;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}
.drop {
    width: 140px;
    float: right;
    margin-left: 10px;
    margin-right: 10px;
}
.testBg {
    background: #BDD2FF;
    height: 40px;
    width: 100%;
    display: none;
    position: relative;
    z-index: 3;
    top: 44px;
}
.sf-navbar:before {
    height: inherit;
}

JavaScript

var navUl;

 navUl = $('ul.sf-menu');

 navUl.superfish({
     cssArrows: true,
     disableHI: true,
     delay: 0,
     speed: 200,
     speedOut: 0
     //pathClass:	'current'
 });

 $("#main-nav").hover(

 function () {
     $('.testBg').css('display', 'block');
 }, function () {
     $('.testBg').fadeOut(400);
 });