JSFiddle - React, Tailwind, and code Playground

by Kishore Sahasranaman

HTML

<div class="subheader">
            <div class="user_inside">
              <p>Welcome Giocconda</p>
              <div id="cssmenu">
                <ul>
                   <li class='active has-sub'><a href='#'><img src="images/profile_icn.png"></a>
                      <ul>
                         <li class='has-sub'><a href='#'><span>Product 1</span></a>
                         </li>
                         <li class='has-sub'><a href='#'><span>Product 2</span></a>
                         </li>
                      </ul>
                   </li>
                </ul>
              </div>
            </div>
          </div>

CSS

#cssmenu {
  position: relative;
  height: 30px;
  width: auto;
  display: inline-block;
  margin-top: 3px;
  box-sizing: border-box; 
}
#cssmenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1;
}
#cssmenu > ul {
  position: relative;
  display: block;
  width: 100%;
  z-index: 500;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu.align-center ul {
  text-align: center;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu > ul > li {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
}
#cssmenu > ul > #menu-button {
  display: none;
}
#cssmenu ul li a {
  display: block;
  font-family: Helvetica, sans-serif;
  text-decoration: none;
}
#cssmenu > ul > li > a {
  font-size: 14px;
  font-weight: bold;
  padding:0px 20px;
  color: #7a8189;
  text-transform: uppercase;
  -webkit-transition: color 0.25s ease-out;
  -moz-transition: color 0.25s ease-out;
  -ms-transition: color 0.25s ease-out;
  -o-transition: color 0.25s ease-out;
  transition: color 0.25s ease-out;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 32px;
}
#cssmenu > ul > li:hover > a {
  color: #ffffff;
}
#cssmenu li.has-sub::after {
  display: block;
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}
#cssmenu > ul > li.has-sub::after {
  right: 18px;
  top: 6px;
  border: 5px solid transparent;
  border-top-color: #7a8189;
}
#cssmenu > ul > li:hover::after {
  border-top-color: #ffffff;
}
#indicatorContainer {
  position: absolute;
  height: 12px;
  width: 100%;
  bottom: 0px;
  overflow: hidden;
  z-index: -1;
}
#pIndicator {
  position: absolute;
  height: 0;
  width: 100%;
  border: 12px solid transparent;
  border-top-color: #2b2f3a;
  z-index: -2;
  -webkit-transition: left .25s ease;
  -moz-transition: left .25s ease;
  -ms-transition: left .25s ease;
  -o-transition: left...

JavaScript

( function( $ ) {
$( document ).ready(function() {
$('#cssmenu').prepend('<div id="indicatorContainer"><div id="pIndicator"><div id="cIndicator"></div></div></div>');
    var activeElement = $('#cssmenu>ul>li:first');

    $('#cssmenu>ul>li').each(function() {
        if ($(this).hasClass('active')) {
            activeElement = $(this);
        }
    });


	var posLeft = activeElement.position().left;
	var elementWidth = activeElement.width();
	posLeft = posLeft + elementWidth/2 -6;
	if (activeElement.hasClass('has-sub')) {
		posLeft -= 6;
	}

	$('#cssmenu #pIndicator').css('left', posLeft);
	var element, leftPos, indicator = $('#cssmenu pIndicator');
	
	$("#cssmenu>ul>li").hover(function() {
        element = $(this);
        var w = element.width();
        if ($(this).hasClass('has-sub'))
        {
        	leftPos = element.position().left + w/2 - 12;
        }
        else {
        	leftPos = element.position().left + w/2 - 6;
        }

        $('#cssmenu #pIndicator').css('left', leftPos);
    }
    , function() {
    	$('#cssmenu #pIndicator').css('left', posLeft);
    });

	$('#cssmenu>ul').prepend('<li id="menu-button"><a>Menu</a></li>');
	$( "#menu-button" ).click(function(){
    		if ($(this).parent().hasClass('open')) {
    			$(this).parent().removeClass('open');
    		}
    		else {
    			$(this).parent().addClass('open');
    		}
    	});
});
} )( jQuery );