JSFiddle - React, Tailwind, and code Playground

HTML

<div class="separator"></div>
<div class="menu">
    <div class="menu-group">
        <div class="menu-group-hover">Menu Item</div>
            <div class="menu-group-content">   
                <ul>
                    <li>Submenu1 Item1</li>
                    <li>Submenu1 Item2</li>
                    <li>Submenu1 Item3</li>
               </ul>
            </div>
   </div>
</div>

CSS

.menu
{
    position: fixed;
    border: 1px solid #ddd;
    width: 47px;
    float:left;
    background:#ccc;
    
}

.menu-group{
    background:gray;
}

/*wp-group-hover have the image for the menu */

.menu-group-hover{
    height:50px;
    position:relative;
}
.menu-group-content{
    display:none;
    position:absolute;
    margin-left:47px;
    z-index:999;
    width:250px;
    margin-top:-50px;
    border:1px solid gray;
    background:lightblue;
}
.separator{
    width: 20px;
    position: absolute;
    background-color: red;
    height: 100%;
    z-index: 1;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    margin-left:47px;
}

JavaScript

$('.menu-group-hover').hover(
  function () {
    $('.menu-group-content').show();
  },
  function () {
    $('.menu-group-content').hide();
  }
);