JSFiddle - React, Tailwind, and code Playground

by Dan Wright

HTML

<div id="mainNav">
    <ul id="tabs">
        <li class="dropdown"> <a class="dropdown-link" href="#">Item 4</a>

            <div class="sub-menu item">
                <ul>
                    <li><a href="#">Item 3</a>

                    </li>
                    <li><a href="#">Item 2</a>

                    </li>
                    <li><a href="#">Item 1</a>

                    </li>
                </ul>
            </div>
        </li>
        <li class="dropdown"> <a class="dropdown-link" href="#">Item 3</a>

            <div class="sub-menu item">
                <ul>
                    <li><a href="#">Item 2</a>

                    </li>
                    <li><a href="#">Item 1</a>

                    </li>
                </ul>
            </div>
        </li>
        <li class="dropdown"> <a class="dropdown-link" href="#">Item 2</a>

            <div class="sub-menu item">
                <ul>
                    <li><a href="#">Item 4</a>

                    </li>
                    <li><a href="#">Item 3</a>

                    </li>
                    <li><a href="#">Item 2</a>

                    </li>
                    <li><a href="#">Item 1</a>

                    </li>
                </ul>
            </div>
        </li>
        <li class="dropdown"> <a class="dropdown-link" href="#">Item 1</a>

        </li>
    </ul>
</div>

CSS

a.dropdown-link {
    color:#044264;
    font-size:15px;
    font-weight:bold;
    text-decoration:none;
}
ul#tabs {
    margin: 0;
    padding: 0;
    float:left;
    width: 100%;
    list-style: none;
    font-size: 1.1em;
}
ul#tabs li {
    display:inline;
    float:left;
    position:relative;
    margin:0;
    padding:7px 15px 7px 0;
}
/* sub menu class */
 ul#tabs li .sub-menu {
    background:none repeat scroll 0 0 #ECF3F9;
    border-color:-moz-use-text-color #C3D3E1 #C3D3E1;
    border-right:1px solid #C3D3E1;
    border-style:none solid solid;
    border-width:medium 1px 1px;
    display:none;
    font-size:11px;
    left:0;
    margin:0;
    padding:0;
    position:absolute;
    top:29px;
    width:320px;
    z-index:999;
}
ul#tabs li .item {
    width:150px;
}
ul#tabs li .sub-menu li {
    width:135px;
    margin:0;
    padding:5px 10px 0;
}
ul#tabs li .sub-menu li a {
    color: #000;
    text-decoration: none;
}
ul#tabs li .sub-menu li a:hover {
    text-decoration: underline;
}

JavaScript

$(document).ready(function () {
    display();
});

function display() {
    $(".dropdown").hover(function () {
        $(this).children("div.sub-menu").slideDown(200);
    }, function () {
        $(this).children("div.sub-menu").hide();
    });
}