JSFiddle - React, Tailwind, and code Playground

by vend3tta

HTML

<ul class="b-menu">
    <li class="b-menu__item">
        <a href="#" class="b-menu__item-title">Menu Item #1</a>
        <ul class="b-submenu">
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #1</a></li>
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #2</a></li>
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #3</a></li>
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #4</a></li>
        </ul>
    </li>
    <li class="b-menu__item">
        <a href="#" class="b-menu__item-title">Menu Item #2</a>
        <ul class="b-submenu">
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #1</a></li>
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #2</a></li>
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #3</a></li>
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #4</a></li>
        </ul>
    </li>
    <li class="b-menu__item">
        <a href="#" class="b-menu__item-title">Menu Item #3</a>
        <ul class="b-submenu">
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #1</a></li>
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #2</a></li>
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #3</a></li>
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #4</a></li>
        </ul>
    </li>
</ul>

CSS

* {
    margin: 0;
    padding: 0
    }
body {
    padding: 2em 4em;
    font-family: tahoma;
    font-size: .75em;
    color: #444
    }
a {
    font: inherit;
    color: #1561d9
    }
ul, li {
    list-style: none
    }
.b-menu {
    display: inline-block;
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 4px
    }
.b-menu__item {
    display: inline-block;
    position: relative;
    padding: 4px 12px;
    border: 1px solid #ccc
    }
.b-submenu {
    display: none;
    position: absolute;
    width: 100%;
    top: 18px;
    left: -1px;
    padding: 4px 12px;
    border: 1px solid;
    border-color: #fff #ccc #ccc;
    border-radius: 0 0 4px 4px;
    z-index: 999;
    background: #fff;
    }

JavaScript

$('a').click(function() {
    $(this).next('ul').slideDown('slow').parents('li').siblings().find('ul').slideUp('slow')
    return false
})