JSFiddle - React, Tailwind, and code Playground

by techie bala

HTML

<div id="menuContainer">
  <ul class="menu"> 
  <li><a href="#">Home</a></li> 
        
  <li><a href="#">Services</a> 
      <ul> 
      <li><a href="#">Web Development</a></li> 
      <li><a href="#">UI Development</a></li> 
      <li><a href="#">Domain Hosting</a></li> 
      <li><a href="#">Cloud Computing</a></li> 
      </ul> 
  </li>
        
  <li><a href="#">Products</a> 
      <ul> 
      <li><a href="#">Android Applications</a></li> 
      <li><a href="#">iOs Applications</a></li> 
      <li><a href="#">Windows Phone</a></li> 
      </ul> 
    </li>
   
     <li><a href="#">Contact</a> 
      <ul> 
      <li><a href="#">Address</a></li> 
      <li><a href="#">Map</a></li> 
      </ul> 
    </li> 

  </ul>
    
</div>

CSS

ul {
     margin: 0; padding: 0; list-style: none; width: 160px;
}

ul li { position: relative; }

li ul {
     position: absolute; left: 160px; top: 0; display: none;
}

ul li a {
    display: block; text-decoration: none; color: #fff; background: #fff; padding: 5px;
    border: solid 1px #da7c0c; border-bottom: 0; background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); 
}

li:hover ul, li.current ul {  display: block; }

.current {
     border:1px solid #93cdf7;
     background-color: #c3e3fa;
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#c3e3fa), to(#a5defb));
     background-image: -webkit-linear-gradient(#c3e3fa, #a5defb);
     background-image: -moz-linear-gradient(#c3e3fa, #a5defb);
     background-image: -o-linear-gradient(#c3e3fa, #a5defb);
     background-image: linear-gradient(#c3e3fa, #a5defb);
     filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#c3e3fa, endColorstr=#a5defb); 
     font-weight:bold;
}

/* Fix IE. Hide from IE Mac */
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

JavaScript

$(function(){

   $( " ul.menu li a" )
  .mouseover(function() {
    $( this ).addClass( "current" );
   })
  .mouseout(function() {
    $( this ).removeClass( "current" );
  });
    
});