JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul class="navbar">
        <li><a href="#home">Home</a>

        </li>
        <li><a href="#news">News</a>

            <ul>
                <li><a href="#home">Home</a>

                </li>
                <li><a href="#news">News</a>

                </li>
            </ul>
        </li>
        <li><a href="#contact">Contact</a>

        </li>
        <li><a href="#about">About</a>

        </li>
    </ul>
</nav>

CSS

.navbar ul {
    display: none;
}
.navbar > li:hover > ul {
    display: block;
}
ul .navbar {
    list-style-type:none;
    overflow:hidden;
}
.navbar > li a {
    color: white;
    text-decoration: none;
    font-family:'Comic Sans Ms';
}
.navbar > li {
    background: -webkit-linear-gradient(gray, black);
    width: 100px;
    display: block;
    position: relative;
    float: left;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 25px;
    padding-right: 25px;
}
.navbar > li:hover {
    cursor: pointer;
    background: gray;
}