JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navi">
                 <div class="menuleft">
                    <ul>
                        <li><a href="../index.php">Home</a></li>
                        <li><a href="../over-ons.php">Over ons</a></li>
                        <li><a href="../contact.php">Contact</a></li>
                        <li><a href="../nieuws.php">Nieuws</a></li>
                        <li><a href="../gastenboek.php">Gastenboek</a></li>
                    </ul>
                </div>
                <div class="menuright">
                    <ul>
            <li><a href="/onze-honden.php">Onze honden</a>
                <ul>
                    <li><a href="/djima.php">Djima</a></li>
                    <li><a href="/avar.php">Avar</a></li>
                    <li><a href="/garry.php">Garry</a></li>
                    <li><a href="/evita.php">Evita</a></li>
                </ul>
            </li>
            <li><a href="/nesten.php">Nesten</a>
                <ul>
                    <li><a href="/a-nest.php">A-nest</a>
                        <ul>
                            <li><a href="/argos.php">Argos</a></li>
                            <li><a href="/aragon.php">Aragon</a></li>
                            <li><a href="/avar.php">Avar</a></li>
                            <li><a href="/amora.php">Amora</a></li>
                            <li><a href="/ambri.php">Ambri</a></li>
                        </ul>
                    </li>
                    <li><a href="/b-nest.php">B-nest</a>
                        <ul>
                            <li><a href="/badgio.php">Badgio</a></li>
                            <li><a href="/barquas.php">Barquas</a></li>
                            <li><a href="/baldomero.php">Baldomero</a></li>
                        </ul>
                    </li>
                    <li><a href="/c-nest.php">C-nest</a>
                        <ul>
                            <li><a href="#">Cidro</a></li>
                           ...

CSS

body{background-color:#666}
a:link {
    color: #F30;
    text-decoration: none;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px #000;
}
a:visited {
    background-color: transparent;
    color: #A1BFDE;
    text-decoration: none;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
}
a:hover {
    background-color: #F30;
    color: #FFFFFF;
    text-decoration: none;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
a:active{
    background-color: transparent;
    color: #F30;
    text-decoration: none;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.navi {
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    height: 22px;
    border-bottom: 1px solid white;
}
.menuleft {
    width: 50%;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-align: left;
    float: left;
    z-index: 3;
    position: relative;
}
.menuleft ul {
    list-style-type: none;
    padding-left: 0px;
    padding-right: 0px;
    margin: 0;
}
.menuleft ul li {
    margin: 0 9px 0 0;
    display:inline;
}
.menuleft ul li a {
    color: #FFF;
    text-decoration: none;
    font-size: 15px;
}
.menuright {
    width: 50%;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-align: right;
    float: left;
    z-index: 3;
    position: relative;
}  
.menuright ul li a{
    color: #FFF;
}
ul
        {
    list-style: none;
    margin: 0;
        }
ul
li
        {
    position: relative;
    margin: 0;
    padding: 10;
    display: inline;
        }
li:hover
        {
    z-index: 1;
        }
ul ul
 
        {
    position: absolute;
    display: none;
    text-align: left;
        }
li:hover ul   
        {
    display: block;
    text-align: left;
        }
 
li:hover ul ul
        {
    display: block;
        }