JSFiddle - React, Tailwind, and code Playground

by minh vi

HTML

<div class="nav">

    <div  class="abc">
        <a href="#">Menu item 2</a>
        <div class="sub-menu">
            <div class="abc"><a href="#">Menu item 2.1</a></div>
            <div  class="abc">
                <a href="#">Menu item 2.2</a>
                <div class="sub-menu">
                    <div  class="abc"i><a href="#">Menu item 2.2.1</a></div>
                    <div  class="abc"><a href="#">Menu item 2.2.2</a></div>
                    <div  class="abc"><a href="#">Menu item 2.2.3</a></div>
                </div>
            </div>
            <div  class="abc"><a href="#">Menu item 2.3</a></div>
            <div  class="abc"><a href="#">Menu item 2.4</a></div>
        </div>
    </div>

</div>

CSS

.nav{
        background-color: #0080C0;
    }
 
    .nav>div.abc{
        float: left;
        margin-right: 15px;
    }
     
    .nav>div.abc>a{
        text-transform: uppercase;
        color: #000;
    }
 
    .nav div.abc{
        position: relative;
    }
 
    .nav div.abc a{
        padding: 10px;
        line-height: 20px;
        
    }
 
    .nav .sub-menu{
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        width: 200px;
        background-color: #eee;
        padding: 5px 20px;
    }
     
    .nav div.abc:hover>.sub-menu{
        display: block;
    }
 
    .nav>div.abc>.sub-menu{
        top: 40px;
        left: 0;
    }