JSFiddle - React, Tailwind, and code Playground

by Awais Imran

HTML

<br /><br /><br /><br /><br /><br /><br />
<div class="parent">
    <div class="child">
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
            <li>Five</li>
            <li>Six</li>
        </ul>
    </div>
</div>
<div class="parent">
    <div class="child">
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
    </div>
</div>
<div class="parent">
    <div class="child">
        <ul>
            <li>One</li>
        </ul>
    </div>
</div>
<div class="parent">
    <div class="child">
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
        </ul>
    </div>
</div>
<div class="parent">
    <div class="child">
        <ul>
            <li>One</li>
            <li>Two</li>
        </ul>
    </div>
</div>

CSS

.parent{
    width:100px; height:100px;
    background:orange;
    position:relative;
    margin-right:100px;
    float:left;
    margin-bottom:80px;
    }
    .parent:hover .child{display:block;}
    .parent .child{
        position:absolute;
        top:0;
        left:100%;
        display:none;
        }
    .parent .child ul{    
        list-style:none;
        margin:0;
        padding:5px;
        background:#262626;
        }
        .parent .child ul li{
            padding:5px;
            font:normal 12px arial;
            border:1px solid black;
            background:#464646;
            color:#fff;
            }