JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top_menu">
                        <ul class="menu">
                            <li><a href=#>Website Templates </a>
                                <ul class="submenu">
                                    <li><a href=#>Sudmenu 1</a></li>
                                    <li><a href=#>Sudmenu 1</a></li>
                                    <li><a href=#>Sudmenu 1</a></li>
                                </ul>
                            </li>
                            <li><a href=#>Design Templates</a>
                                <ul class="submenu">
                                    <li><a href=#>Sudmenu 2</a></li>
                                    <li><a href=#>Sudmenu 2</a></li>
                                    <li><a href=#>Sudmenu 2</a></li>
                                </ul>
                            </li>
                            <li><a href=#>How it Works</a>
                                <ul class="submenu">
                                    <li><a href=#>Sudmenu 3</a></li>
                                    <li><a href=#>Sudmenu 3</a></li>
                                    <li><a href=#>Sudmenu 3</a></li>
                                </ul>
                            </li>
                            <li><a href=#>Contact</a>
                                <ul class="submenu">
                                    <li><a href=#>Sudmenu 4</a></li>
                                    <li><a href=#>Sudmenu 4</a></li>
                                    <li><a href=#>Sudmenu 4</a></li>
                                </ul>
                            </li>
                            <li><a href=#>Blog</a>
                                <ul class="submenu">
                                    <li><a href=#>Sudmenu 4</a></li>
                                    <li><a href=#>Sudmenu 4</a></li>
                                    <li><a href=#>Sudmenu 4</a></li>
                                </ul>
              ...

CSS

a{
    text-decoration: none;
}
ul {
    display: block;
    list-style: none;
}
.top_menu{
    float: left;
    margin: 70px 0 0 30px;
    background: #343434;
}
ul.menu > li {
    float: left;
    position: relative;
}
ul.menu > li > a {
    display: block;
    padding-right: 10px;
    color: white;
    border-bottom: 1px solid #ababab;
    padding: 0 10px 0 10px;
}
ul.menu > li > a:hover {
    border-bottom:  4px solid #000;
}
ul.submenu{
    #border-top: 7px solid #000;
    display: none;
    position: absolute;
    width: 170px;
    #top: 35px;
padding-top:35px;
    left: 0;
    #background: #343434;
}
ul.submenu > li {
    width: 100%;
    display: block;
    float: left;
}
ul.submenu > li:first-child{
border-top: 7px solid #000;
background: #343434; 
}
ul.submenu > li > a {
    display: block;
    padding: 10px;
    color: white;
    #background: re;
background: #343434;
    border-bottom: 1px solid #2c2c2c;
    border-top: 1px solid #414141;
}
ul.submenu > li > a:hover {
    color: #939393;
}
ul.menu > li:hover > ul.submenu {
    display: block;
}