JSFiddle - React, Tailwind, and code Playground

by renjith

HTML

<div class="nav">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li>
            <a href="game.html">Sample Game</a>
            <div class="dropdown">
                <a href="index.html">About it</a>
                <br>
                <a href="index.html">Game</a>
            </div>
        </li>
        <li><a href="solutions.html">TP Solutions</a>
               <div class="dropdown">
                <a href="index.html">About it</a>
                <br>
                <a href="index.html">Game</a>
            </div>
            </li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="contact.html">Contact Me</a></li>
    </ul>
<div class="clear"></div>

CSS

div.nav {
    text-align: center;
}
div.nav > ul > li {
    margin-top: 15px;
    text-align: center;
    font-size: 1.25em;
}
div.nav > ul > li {
    display: inline-block;
    list-style-type: none;
    border:1px solid red;
}
div.nav a {
    padding: 1em;
}
div.dropdown {
    display: none;
    background-color: black;
    position: absolute;
}
.shomenu div.dropdown{
    display:block !important;
}

JavaScript

$(".nav").on("mouseenter","li",function(){
    $(this).find(".dropdown").show();
});
$(".nav").on("mouseleave","li",function(){
	$(this).find(".dropdown").hide();
});