JSFiddle - React, Tailwind, and code Playground

HTML

<div class=fon><ul>
    <li>Персик</li>
<li>Груша
    <div class=sub>
        Who is?
    </div>
    </li>
    <li>Апельсин</li>
</ul>
</div>

CSS

.fon {
    height:100%;
    weight:100%;
    background-color: #3D6AA2;
}
ul {
    list-style:none;
    margin:0;
    padding:0;     
}
li {
   position:relative;
    display:block;
    float:left;
    padding:5px;
    margin:0 5px;
    background-color:green;
    list-style:none;
}
.sub {
  display:none;
    /*z-index:-1;*/
}
li:hover .sub {
     left:-20px;
    top:auto;
    width:100px;
     position:absolute;
    display:block;
    background-color:red;
    /*z-index:1;*/
}