JSFiddle - React, Tailwind, and code Playground

by achilles03anil

HTML

<div class="cd-dropdown-wrapper pull-left">
            <a class="cd-dropdown-trigger" href="#0">SHOP BY CATEGORIES</a>
            <nav class="cd-dropdown">
                <h2>Shop by Categories</h2>
                <a href="#0" class="cd-close">Close</a>
                <ul class="cd-dropdown-content">
                 <li class="has-children">
                        <a href="#womens-fashion" class="">Women's Fashion</a>
                        <ul class="cd-secondary-dropdown is-hidden">
                            <li class="has-children">
                                <a href="#">Women's Fashion</a>
                                <ul class="is-hidden">
                                 <li class="has-children">
                                        <a href="#womens-clothing">Women's Clothing</a> 
                                           <ul class="is-hidden">
                                            <li class="see-all"><a href="#womens-clothing">View Women's Clothing</a></li>
                                                                                        <li class="has-children">
                                                <a href="#womens-dresses">Women's Dresses</a> 
                                                </li>
                                                </ul>
                                                </li>
                                                </ul>
                                                </li>
                                                </ul>
                                                </li>
                
                </ul>
                </nav>
                </div>

CSS

.cd-dropdown-wrapper {
    display: inline-block;
    position: relative;
    height: 40px;
    margin: 30px 0 0 5%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.cd-dropdown-trigger {
    display: block;
    position: relative;
    padding: 0 36px 0 20px;
    line-height: 40px;
    background-color: #111433;
    color: #fff;
    border-radius: 3px
}

.no-touch .cd-dropdown-trigger:hover {
    background-color: #171b46
}

.cd-dropdown-trigger::before,
.cd-dropdown-trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -1px;
    height: 2px;
    width: 9px;
    background: #fff;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: width .3s, -webkit-transform .3s;
    -moz-transition: width .3s, -moz-transform .3s;
    transition: width .3s, transform .3s
}

.cd-dropdown-trigger::before {
    right: 22px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

.cd-dropdown-trigger::after {
    right: 17px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

@media only screen and (min-width:1024px) {
    .cd-dropdown-trigger {
        font-size: 1.5rem
    }
    .cd-dropdown-trigger.dropdown-is-active {
        background-color: #3f8654
    }
    .no-touch .cd-dropdown-trigger.dropdown-is-active:hover {
        background-color: #47975f
    }
    .cd-dropdown-trigger.dropdown-is-active::before,
    .cd-dropdown-trigger.dropdown-is-active::after {
        width: 14px
    }
    .cd-dropdown-trigger.dropdown-is-active::before {
        -webkit-transform: translateX(5px) rotate(-45deg);
        -moz-transform: translateX(5px) rotate(-45deg);
        -ms-transform: translateX(5px) rotate(-45deg);
        -o-transform:...

JavaScript

var $menu = $('.cd-dropdown-content li');

$menu.menuAim({
	activate: activateSubmenu,
	deactivate: deactivateSubmenu
});

function activateSubmenu(row) {
	var $row = $(row),
      $submenu = $row.children('ul');

	$row.children('a').addClass('hover');
	$submenu.css({display: 'block'});
}

function deactivateSubmenu(row) {
	var $row = $(row),
		$submenu = $row.children('ul');

	$row.find('a').removeClass('hover');
	$submenu.css('display', 'none');
}

$(document).click(function() {
	$('a.hover').removeClass('hover');
	$('.popover').css('display', 'none');
});