JSFiddle - React, Tailwind, and code Playground

by Pranshu Agrawal

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://www.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div class="btn-group dropdown location_build_dropdown">
    <button href="#" class="btn dropdown-toggle" data-toggle="dropdown" role="button">Select Location<b class="caret"></b>
    </button>
    <ul role="menu" class="dropdown-menu" id="location-api-input">
        <li class="dropdown-submenu"> <a href="#">More options</a>

            <ul class="dropdown-menu">
                <li><a href="#">Second level link</a>
                </li>
                <li><a href="#">Second level link</a>
                </li>
                <li><a href="#">Second level link</a>
                </li>
                <li class="dropdown-submenu"><a href="#">Second level link</a>
                    <ul class="dropdown-menu">
                    <li class="markedLocation"><a href="#">Second level link</a>
                    </li>
                    <li><a href="#">Second level link</a>
                    </li>
                    <li><a href="#">Second level link</a>
                    </li>
                    <li><a href="#">Second level link</a>
                    </li>
                    <li><a href="#">Second level link</a>
                    </li>
                    </ul>
                </li>
                <li><a href="#">Second level link</a>
                </li>
            </ul>
        </li>
        <li class="dropdown-submenu"><a href="#">Another action</a>

            <ul class="dropdown-menu">
                <li><a href="#">Second level link</a>
                </li>
                <li><a href="#">Second level link</a>
                </li>
                <li><a href="#">Second level link</a>
                </li>
                <li><a href="#">Second level link</a>
                </li>
                <li><a href="#">Second level link</a>
    ...

CSS

.dropdown-menu {
  overflow:visible !important;
  overflow-y:scroll !important;
}
.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -5px;
    -webkit-border-radius: 5px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px;
    max-height:300px;
    overflow-y:auto;
    overflow-x:visible;
    
}

.markedLocation {
    background-color:#0088cc !important;
    color:#ffffff !important;
}


li.markedLocation>a::before {
    content: " -";
}


li.markedLocation>a{
    color:#ffffff !important;
}

JavaScript

function formatEntity(str){
	return str.replace(/_/g, " ");
}

var _locations = {"australia":[], "canada":[], "india":[], "indonesia":[], "new_zealand":[], "philippines":[], "singapore":[], "united_kingdom":[], "united_states":[]};
var location_fetched = 0;
[].forEach.call(Object.keys(_locations), function(coun){
  (function(coun){
    $.get("http://api.frrole.com/v2/config-api/locations?apikey=ZeeWall-vDheakiNJepmu1mC2V1d55dee418bdbe4&locationtype=city&country="+coun, function(data){
      [].forEach.call(data.data, function(inst, i){
            if(i>19) return;
            if(_locations.hasOwnProperty(inst.country))
            {if(_locations[inst.country].indexOf(inst.city)==-1) _locations[inst.country].push(inst.city);}
            //else _locations[inst.country] = [inst.city];
        });
        location_fetched++;
        if(Object.keys(_locations).length==location_fetched)
          loadData();
    });
  })(coun);
});


function loadData(){ 
        var _html = "";
        [].forEach.call(Object.keys(_locations), function(inst){
            _html += '<li class="dropdown-submenu" data-type="country" data-name="'+inst+'"> <a href="#" data-type="country" data-name="'+inst+'">'+formatEntity(inst)+'</a>'
            + '<ul class="dropdown-menu">';
            [].forEach.call(_locations[inst], function(cinst){
                _html += '<li class="neighbourhoodTrigger nullNeighbourhood  dropdown-submenu" data-type="city" data-name="'+cinst+'"> <a href="#" data-type="city" data-name="'+cinst+'">'+formatEntity(cinst)+'</a>'
                    +'<ul class="dropdown-menu"><li><a href="#">Loading...</a></li></ul>'
                    +'</li>';
            });
            _html += "</ul></li>";
        });
        
        $("#location-api-input").html(_html);
        
    
    $(".location_build_dropdown").on("mouseenter", ".neighbourhoodTrigger.nullNeighbourhood", function(){
        var el = $(this);
        el.removeClass("nullNeighbourhood");
        var city =...