JSFiddle - React, Tailwind, and code Playground

by Oleh Kotsubko

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<body>
    <ul class="nav navbar-nav">
        <li class="dropdown mega-dropdown "> <a href="javascript:;" class="dropdown-toggle">
      <i class="fa fa-"></i> Menu item 1
      <span class="fa fa-chevron-down pull-right"></span>
    </a>

            <ul class="dropdown-menu mega-dropdown-menu">
                <li>
                    <div id="carousel" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li class="" data-slide-to="0" data-target="#carousel"></li>
                            <li class="active" data-slide-to="1" data-target="#carousel"></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="item">
                                <img alt="" class="img-rounded" src="//placehold.it/360x240/&text=Hello" />
                            </div>
                            <div class="item active">
                                <img alt="" class="img-rounded" src="//placehold.it/360x240/&text=World" />
                            </div>
                        </div> <a data-slide="prev" role="button" href="#carousel" class="left carousel-control">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
 <a data-slide="next" role="button" href="#carousel" class="right carousel-control">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>

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

CSS

body {
    height: 800px;
}

JavaScript

$('li.dropdown.mega-dropdown a').on('click', function (event) {
    $(this).parent().toggleClass("open");
});

$('body').on('click', function (e) {
    if (!$('li.dropdown.mega-dropdown').is(e.target) && $('li.dropdown.mega-dropdown').has(e.target).length === 0 && $('.open').has(e.target).length === 0) {
        $('li.dropdown.mega-dropdown').removeClass('open');
    }
});