JSFiddle - React, Tailwind, and code Playground

by NAGA SAI AYTHA

HTML

<div id="menu">
        <ul>
            <li id="dropdown1"><a href="#">Dropdown 1</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Dropdown 11</a></li>
                    <li><a href="#">Dropdown 12</a></li>
                </ul>
            </li>
            <li id="dropdown2"><a href="#">Dropdown 2</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Dropdown 21</a></li>
                    <li><a href="#">Dropdown 22</a></li>
                    <li><a href="#">Dropdown 32</a></li>
                    <li><a href="#">Dropdown 42</a></li>
                    <li><a href="#">Dropdown 52</a></li>
                </ul>
            </li>
            <li id="dropdown3"><a href="#">Dropdown 3</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Dropdown 31</a></li>
                    <li><a href="#">Dropdown 32</a></li>
                    <li><a href="#">Dropdown 33</a></li>
                </ul>
            </li>
        </ul>
    </div>

CSS

#menu {
    background-color: #2C2C2C;
    background-image: -moz-linear-gradient(center top , #333333, #222222);
    background-repeat: repeat-x;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.1) inset;
    min-height: 40px;
    padding-left: 20px;
    padding-right: 20px;
    float:left;
    width:940px;
}

#menu ul {
    float:left;
    width:100%;
    padding:0px;
}

#menu ul li {
    float:left;
    position:relative;
    list-style:none;
}

#menu ul li a {
    color: #999999;
    float: none;
    line-height: 19px;
    padding: 9px 10px 11px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

#menu ul li a:hover {
    color: #ffffff;
}

#menu .dropdown-menu {
    display: none;
    left: 10px;
    position: absolute;
    top:35px;
    width:140px;
    background-color:#FFFFFF;
    border-radius:5px;
    border:1px solid #333333;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

#menu .dropdown-menu:after {
    border-bottom: 6px solid #FFFFFF;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: "";
    left: 10px;
    position: absolute;
    top: -6px;
}

.dropdown-menu li {
    float:left;
    width:100%;
    list-style:none;
}

.dropdown-menu li a {
    clear: both;
    color: #333333;
    display: block;
    font-weight: normal;
    line-height: 18px;
    padding: 3px 15px;
    white-space: nowrap;
}
.dropdown-menu li a:hover {
    color: #ffffff;
    background-color:#333333;
}

.unavailable{
  display:none;
}

JavaScript

$(document).ready(function(){
    $('#menu li a').click(function(){
     $('.dropdown-menu').addClass('available');
     var count =0
          $('.dropdown-menu li a').click(function(){
  count++;
  if(count==2){ $('.dropdown-menu').hide();}
          });
        var parent = $(this).parent().attr('id');
        if ($('#'+parent+' .dropdown-menu').is (':hidden'))
            $('#'+parent+' .dropdown-menu').show();
        else
            $('#'+parent+' .dropdown-menu').hide();
          
        return false;
    });

    $('body,html').click(function(){
         $('.dropdown-menu').hide();
    });
});