JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li><a href="">HOME</a>

            <div class="pos-fix">
                <ul class="vert"></ul>
            </div>
        </li>
        <li><a href="">APPAREL</a>

            <div class="pos-fix">
                <ul class="vert">
                    <li><a href="">Saree</a>

                    </li>
                    <li><a href="">Dress Material</a>

                    </li>
                    <li><a href="">Stoles & Dupattas</a>

                    </li>
                    <li><a href="">Bottoms & Dupatta Sets</a>

                    </li>
                    <li><a href="">Kurta/Kurtis</a>

                    </li>
                    <li><a href="">Bottoms</a>

                    </li>
                </ul>
            </div>
        </li>
        <li><a href="">HOME & LIVING</a>

            <div class="pos-fix">
                <ul class="vert">
                    <li><a href="">Home Linen</a>

                    </li>
                    <li><a href="">Decor</a>

                    </li>
                    <li><a href="">Furnishing</a>

                    </li>
                </ul>
            </div>
        </li>
        <li><a href="/DemoDesiDori/jewellery-desidori.html">JEWELLERY</a>

            <div class="pos-fix">
                <ul class="vert">
                    <li><a href="">Necklace</a>

                    </li>
                    <li><a href="">Anklet</a>

                    </li>
                    <li><a href="">Bracelet & Bangles</a>

                    </li>
                    <li><a href="">Pendants</a>

                    </li>
                    <li><a href="">Earrings</a>

                    </li>
                    <li><a href="">Rings</a>

                    </li>
                    <li><a href="">Toe rings</a>

                    </li>
                </ul>
            </div>
        </li>
        <li><a href="">ACCESSORIES</a>

            <div class="pos-fix">
           ...

CSS

nav {
    background:#ffffff;
    display:inline-table;
    width:100%;
    min-width:80%;
    max-width:100%;
}
nav ul {
    width:100%;
    min-width:80%;
    list-style:none;
}
nav ul li {
    border-right:0px solid;
    display:table-cell;
    padding:0;
    margin:10px;
    font:100%/38px Ubuntu, 'Segoe UI';
    text-align:center;
}
nav ul li a {
    display:block;
    width:140px;
    min-width:140px;
    max-width:140px;
    margin:0;
    height:24px;
    color:#000000;
    text-decoration:none;
    position:relative;
    text-align:left;
}
.vert {
    display:none;
    width: 100%;
    position: absolute;
    background:#fff;
    height:180px;
}
.vert li {
    width:120px;
    display: block;
    text-align: left;
    font-size:13px;
}
.vert li:hover {
    text-decoration:underline;
}
nav :hover .vert {
    display: block;
    z-index:999;
    padding:0;
}
.pos-fix {
    position: relative;
    padding-top:10px;
}