JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="navbar">
    <li><a href="index.php">Home</a></li>
    <li><a href="#">Gallery</a>
        <ul class="submenu">
           <li><a href="photogallery1.php">Photogallery 1</a></li>
           <li><a href="photogallery2.php">Photogallery 2</a></li>
           <li><a href="photogallery3.php">Photogallery 3</a></li>
        </ul>         
    </li>
    <li><a href="events.php">Events</a></li>
    <li><a href="#">Blog</a>
        <ul class="submenu">
           <li><a href="personal.php">Personal</a></li>
           <li><a href="dev.php">Dev</a></li>
        </ul> 
    </li>
    <li><a href="#">About</a>
        <ul class="submenu">
           <li><a href="page1.php">Page 1</a></li>
           <li><a href="page2.php">Page 2</a></li>
        </ul>
    </li>
</ul>

CSS

#navbar {
 background-color: #4E78B4;
 position: absolute;
 text-align: center;
 margin: 0;
 float: left;
 left: 10px;
 width: 940px;    
 font-size: 14px;
 z-index: 100;
}

#navbar li {
 list-style: none;
 float: left; 
 color: #E9EBDE;
 z-index: 100;
}

#navbar li a {
 display: block;
 padding: 10px 15px;   
 text-transform: uppercase;
 text-decoration: none; 
 font-weight: bold; 
 color: #ffffff;
 z-index: 100;
 text-align: center;
}

#navbar ul li a {
 display: block;
 padding: 7px;
 text-decoration: none;
 z-index: 100;
}

#navbar li a:hover {
 color: #000000;
 background-color: #ffffff;
 z-index: 100;
}

#navbar li ul{
 display: none;  
 background-color: #41B6DC;
 z-index: 100;
}

#navbar li:hover ul, #navbar li.hover ul {
 position: absolute;
 display: block;
 left: 0;
 width: 940px;
 margin: 0;
 padding: 0;            
 z-index: 100;
 top: 100%;
}

#navbar li:hover li, #navbar li.hover li {
 float: left; 
 z-index: 100;
}

#navbar li:hover li a, #navbar li.hover li a {
 color: #000; 
 z-index: 100;
}

#navbar li li a:hover {
 color: #4E78B4; 
 z-index: 100;
}