JSFiddle - React, Tailwind, and code Playground

HTML

<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
    <li class='has-sub'><a href='http://www.google.at'><span>Google</span></a>
      <ul>
         <li><a href='#'><span>Maps</span></a></li>
         <li><a href='#'><span>Bla bla</span></a></li>
         <li class='last'><a href='#'><span>Next Bla bla</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Company</span></a>
      <ul>
         <li><a href='#'><span>About</span></a></li>
         <li class='last'><a href='#'><span>Location</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

CSS

/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-size: 12px;
  position: relative;
}
#cssmenu a {
  line-height: 1.3;
}
#cssmenu {
  width: 100%;
}
#cssmenu > ul > li > a {
  padding-right: 40px;
  font-size: 25px;
  font-weight: bold;
  display: block;
  background: #E7E7E7;
  color: #000;
  border-bottom: 1px solid #e7e7e7;
}
#cssmenu > ul > li > a > span {
  background: #F1F1F1;
  padding: 5px 5px 5px 10px;
  display: block;
  font-size: 12px;
  font-weight: 300;
}
#cssmenu > ul > li > a:hover {
  text-decoration: none;
}
#cssmenu > ul > li.active {
  border-bottom: none;
}
#cssmenu > ul > li.active > a {
  color: #000;
}
#cssmenu > ul > li.active > a span {
  background: #E7E7E7;
}
#cssmenu span.cnt {
  position: absolute;
  top: 6px;
  right: 15px;
  padding: 0;
  margin: 0;
  background: none;
}
/* Sub menu */
#cssmenu ul ul {
  display: none;
}
#cssmenu ul ul li {
  border: 1px solid #e0e0e0;
  border-top: 0;
}
#cssmenu ul ul a {
  padding: 5px 5px 5px 25px;
  display: block;
  color: #ed1144;
  font-size: 12px;
}
#cssmenu ul ul a:hover {
  color: #bd0e36;
}
#cssmenu ul ul li.odd {
  background: #f4f4f4;
}
#cssmenu ul ul li.even {
  background: #fff;
}

JavaScript

$(document).ready(function(){
    
    $('#cssmenu > ul > li ul').each(function(index, e){
      var count = $(e).find('li').length;
      var content = '<span class="cnt">' + count + '</span>';
      $(e).closest('li').children('a').append(content);
    });    
    
    $('#cssmenu > ul > li > a').click(function() {
        $('#cssmenu li').removeClass('active');
        $(this).closest('li').addClass('active');	
        var checkElement = $(this).next();
        if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            $(this).closest('li').removeClass('active');
            checkElement.slideUp('normal');
        }
        if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#cssmenu ul ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
        }
        if($(this).closest('li').find('ul').children().length == 0) {
            return true;
        } else {
            return false;	
        }		
    });
});

$(document).ready( function() {
	$('#cssmenu ul li.has-sub').parent().show();
	$('#cssmenu ul li.has-sub ul').show();
	$('#cssmenu li.has-sub ul').show();
});