JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="drop">
        <ul class="drop_menu">
            <ul>
                <li><a href="main.html">Home</a>

                </li>
                <li><a href="about.html">About</a>
                    <ul>
                    <li><a href="biography.html">Biography</a>

                    </li>
                    <li><a href="statement.html">Statement</a>

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

                    </li>
                </ul>
                </li>
                
                <li><a href="gallery.html">New Work</a>

                </li>
                <li><a href="archive.html">Archive</a>

                </li>
                <li><a href="collaboration.html">collaboration</a>

                </li>
                <li><a href="news.html">News</a>

                </li>
            </ul>
        </ul>
        </ul>
    </div>
</body>

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul li {
    display: inline-block;
    width: 10em;
    height: 2em;
    line-height: 2em;
    position: relative;
    border-bottom: 2px solid #ccc;
}

ul li:hover {
    background-color: #ffa;
}

ul li ul {
    display: none;
    position: absolute;
    top: 2em;
    left: 0;
}

ul li:hover ul {
    display: block;
}