JSFiddle - React, Tailwind, and code Playground

by anar1811

HTML

<ul class="ag-mmenu">
    <li><a href="#" title="linkmain">linkmain</a></li>
    <li><a href="#" title="linkmain2">linkmain2</a></li>
    <li><a href="#" title="linkmain3" class="lmb" >linkmain3</a>
    <ul class="ag-lmbsub">
    <li><a href="#" title="linkmain">linkmain</a></li>
    <li><a href="#" title="linkmain2">linkmain2</a></li>
    <li><a href="#" title="linkmain3" >linkmain3</a></li>
</ul>
    </li>
</ul>

CSS

body{
	margin: 0px;
	padding: 0px;
}
.ag-mmenu ul {background:#333;}
.ag-mmenu ul ul {background:none}
.ag-mmenu li{
	float: left;
	list-style: none;
}
.ag-mmenu a{
	padding:0 6px;
}
.ag-lmbsub{display:none}
.ag-lmbsub li {float:none}

JavaScript

$('.lmb').mouseover(function() {
  $('.ag-lmbsub').fadeIn('slow', function() {
  });
});
$('.lmb, ag-lmbsub').mouseout(function() {
  $('.ag-lmbsub').fadeOut('slow', function() {
  });
});