JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigation">
<div class="FirstDiv">
    <li class="menu"> Menu 1 </li>
    <li class="menu"> Menu 2 </li>
    <li class="menu"> Menu 3 </li>
    <li class="menu"> Menu 4 </li>
</div>
<div class="secondDiv">
    Second Div <br/>
    Sub menus
</div>
</div>

CSS

.FirstDiv{
    float:left;
 height: 200px;
 overflow-y:scroll;
 border: 1px solid;
 width:120px;
 
}
.secondDiv{
    float:left;
    border: 1px solid;
     height: 200px;
    width:200px;
     background: #FF2200;
    display:none;
}
li{
    height:30px;
    color:#FFF;
    background-color: #000;
}
.FirstDiv > li:hover {
    background: #FF2200;
    cursor: pointer;
}
li:hover + .secondDiv{
    display:block !important;
}