JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
            <ul>
                <li><a href="index.php">Home</a></li>
                <li><a href="play.php">RSCDaemon</a>
                    <ul>
                        <li><a href="play.php">Play</a></li>
                        <li><a href="subscribe.php">Subscribe</a></li>
                        <li><a href="about.php">About</a></li>
                        <li><a href="rules.php">Rules</a></li>
                        <li><a href="faq.php">FAQ</a></li>
                        <li><a href="live_feed.php">Live Feed</a></li>
                        <li><a href="map.php">Map</a></li>
                    </ul>
                </li>
                <li><a href="forum.php">Community</a>
                    <ul>
                        <li><a href="forum.php">Forum</a></li>
                        <li><a href="irc.php">IRC</a></li>
                                            </ul>
                </li>                
                <li><a href="account_management.php" rel="nofollow">Account Management</a></li>
                <li><a href="forum.php">Register</a>
                    <ul>
                        <li><a href="forum.php">Forum</a></li>
                        <li><a href="irc.php">IRC</a></li>
                                            </ul>
                </li>                
                            </ul>
        </nav>

CSS

* {
    margin: 0px;
    padding: 0px;    
    font: 8pt Verdana, Arial;
    z-index: 0;
}

nav {
    margin-top: -35px;
    text-align: center;
    border: 1px solid #626262;
    z-index: 5;
}

nav ul li ul {
    width: 180px;
    left: -999em;
    border-left: 1px solid #626262;
    border-right: 1px solid #626262;
    border-bottom: 1px solid #626262;
    opacity: 0;
    z-index: 1;    
    position: absolute;
}

nav ul li ul li {
    border-top: 1px dotted #626262;
    border-top-width: 1px;
    height: 0px;

}

nav a:hover {
    color: #FFFFFF;    
}

nav li:hover ul {
    left: auto;
    opacity: 1;
    box-shadow: 0 0 40px black;
}

nav li:hover ul li {
    height: 35px;
    z-index: 2;
}

nav a {
    color: #626262;
    padding: 10px;
    margin-left: 10px;
    margin-right: 10px;
    width: 140px;
    display: inline-block;
}

nav ul li {
    display: inline-block;
    list-style: none;
    overflow: hidden;
}