JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title: Navigation menu</title>

    <link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>

<!-- START: menu -->
<ul id="nav">
    <li class="menu"><a href="#">Home</a></li>
    <li class="menu"><a href="#">Main Menu 2</a>
        <ul class="submenu">
            <li><a href="#">Sub Menu 2.1</a></li>
            <li><a href="#">Sub Menu 2.2</a></li>
            <li><a href="#">Sub Menu 2.3</a>
                <ul>
                <li><a href="#">Sub-Sub Menu 2.3.1</a></li>
                <li><a href="#">Sub Menu 2.3.2</a></li>
                <li><a href="#">Sub Menu 2.3.</a></li>
                </ul>
            </li>
            <li><a href="#">Sub Menu 2.4</a></li>
            <li><a href="#">Sub Menu 2.5</a></li>
            <li><a href="#">Sub Menu, Some Sample Text  2.6</a></li>
            <li><a href="#">Sub Menu, Sample Text  2.7</a></li>
        </ul>
    </li>
    <li class="menu"><a href="#">Main Menu 3</a>
        <ul class="submenu">
            <li><a href="#">Sub Menu 3.1</a></li>
            <li><a href="#">Sub Menu 3.2</a></li>
            <li><a href="#">Sub Menu 3.3</a></li>
            <li><a href="#">Sub Menu 3.5</a></li>
            <li><a href="#">Sub Menu 3.6</a></li>
            <li><a href="#">Sub Menu 3.7</a></li>
        </ul>
    </li>
    <li class="menu"><a href="#">Main Menu 4</a>
        <ul class="submenu">
            <li><a href="#">Sub Menu 4.1</a></li>
            <li><a href="#">Sub Menu 4.2</a></li>
            <li><a href="#">Sub Menu Sample Text 4.3</a></li>
            <li><a href="#">Sub Menu 4.4</a></li>
            <li><a href="#">Sub Menu 4.5</a></li>
            <li><a href="#">Sub Menu 4.6</a></li>
            <li><a href="#">Sub Menu 4.7</a></li>
            <li><a href="#">Sub Menu 4.8</a></li>
        </ul>        
    </li>
    <li class="menu"><a href="#">Menu 5</a></li>
    <li...

CSS

@charset "utf-8";
#nav {
    background-color: #000;
    position: relative;

    font-family: Arial, Helvetica, sans-serif; 
    font-size: 0.975em;
    text-align: left;
    display: block;
    border: 1px dotted #cccccc;
    padding: 0;
    margin: 0;
}
#nav a {
    color: #fff;
    text-decoration: none;
}
#nav li {
    color: #fff;
    text-align: left;

    width: 110px;
    border: 1px solid #CCCCCC;
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: inline-block;
}
#nav li ul {
    color: navy;
    text-align: left;
    list-style-type: none;

    width: 200px;
    border: 1px solid #000;
    padding: 0;
    margin: 0;

    display: none;
    position: absolute;
    background-color: #990000;
}

/*Sub menu */
#nav li ul a {
    display: inline-block;
}
#nav li:hover ul {
    visibility: visible;
    display: block;
    background-color: #E6B800;
}
#nav li:hover ul li {
    background-color: #E6B800;
}

/*Sub-sub menu */
#nav li ul li ul li a {
    display: none;
}
#nav li ul li ul li:hover {
    visibility: visible;
    display: block;
    background-color: #E6B800;
}
#nav li ul li ul li:hover ul li {
    background-color: #E6B800;
}