JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<div id="menu-item-6">Home</div>
<div id="menu-item-98">Energy</div>
<div id="menu-item-97">Enviroment</div>

<div id="container">
<div class="energy-links">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut justo dui, eu malesuada ipsum. Donec ornare tincidunt euismod. Pellentesque lobortis interdum risus, vitae aliquet sapien rhoncus quis. Etiam pretium posuere urna, in convallis elit auctor id. Duis mauris metus, aliquam in dignissim quis, mattis nec lectus.</div>
<div class="enviroment-links">Link Two Information</div>
</div>

CSS

#container { position:absolute; margin-top: 60px; }

#menu-item-6 { cursor:pointer; background-color:#CCC; padding:15PX; float:left; width: 100px; display:block; }
#menu-item-98 { cursor:pointer; margin-left:10px; background-color:#CCC; padding:15PX; float:left; width: 100px; display:block; }
#menu-item-97 { cursor:pointer; margin-left:10px; background-color:#CCC; padding:15PX; float:left; width: 100px; display:block; }

.energy-links { width:300px;display:none; border:1px solid #ccc; height:150px; padding:15px; } 
.enviroment-links { width:300px;display: none; border:1px solid #ccc; height:150px; padding:15px; }

JavaScript

$('#menu-item-98').bind('mouseenter mouseleave', function(event) {
    switch(event.type) {
        case 'mouseenter':
           // when user enters the div
           $(".energy-links").slideDown("fast");
            $(".enviroment-links").slideUp("fast");
        break;
        case 'mouseleave':
          // leaves
           $(".energy-links").mouseout(function () {
               $(".energy-links").slideUp("fast");
               
               });
        break;
	
    }
});

$('#menu-item-97').bind('mouseenter mouseleave', function(event) {
    switch(event.type) {
        case 'mouseenter':
           // when user enters the div
           $(".enviroment-links").slideDown("fast");
            $(".energy-links").slideUp("fast");
        break;
        case 'mouseleave':
          // leaves
           $(".enviroment-links").mouseout(function () {
               $(".enviroment-links").slideUp("fast");
               
               });
        break;
	
    }
});

 $("#menu-item-6").hover(function () {
     $(".enviroment-links").hide();
     $(".energy-links").hide();
 });