JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<ul>
    <li class="menuItem">
        <a href="#">MenuItem</a>
        <div class="menuBody">Hover!</div>
    </li>
    <li class="menuItem">
        <a href="#">MenuItem</a>
        <div class="menuBody">dsaad!</div>
    </li>

</ul>

CSS

ul {
    position:relative;
}

.menuBody {
    display: none;
    background: #ccc;
    width:300px;
    height:600px;
    position:absolute;
    left:0;
}
.menuItem {
    background: #aaa;
    float:left;
    margin-right:12px;
}
.menuItem:hover {
    background: red;
}
.menuItem:hover .menuBody {
    display: block;
}