JSFiddle - React, Tailwind, and code Playground

by ynternet

HTML

<div class="menu1_sub">
  <div class="menu1_element_1">
    <h5>Sample text 1</h5>
  </div>
  <div class="menu1_element_2">
    <br>
    <h5>Sample text 2</h5>
  </div>
  <ul>
    <li class="menu1_butt_1">Menu item 1</li>
    <li class="menu1_butt_2">Menu item 2</li>
  </ul>
</div>

CSS

.menu1_sub {
  position: absolute;
  width: 500px;
  padding: 10px 0px 10px 0px;
  background: #fff;
}

.menu1_sub ul {
  width: 200px;
  float: right;
  border-left: 1px solid #cacdd0;
}

.menu1_sub ul li {
  text-align: left;
  padding: 4px 0px 4px 12px;
  color: #6c6c6c;
  display: block;
  border: 1px solid #ffffff;
}

.menu1_element_1, .menu1_element_2 {
  display: none;
  width: 200px;
}

JavaScript

$('.menu1_butt_1').hover(function(){
     $('.menu1_element_1').css('display', 'inline-block');  //find the div INSIDE this li
}, function() {
    $('.menu1_element_1').css('display', 'none');
});
$('.menu1_butt_2').hover(function(){
     $('.menu1_element_2').css('display', 'inline-block');  //find the div INSIDE this li
}, function() {
    $('.menu1_element_2').css('display', 'none');
});