JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap"><span id="menulabel">--Menu--</span>
  <div class="navbar">
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">PRODUCTS</a></li>
    </ul>
  </div>
</div>

CSS

* {
              margin: 0;
              padding: 0;
            }
            
            body {
              font-family: Helvetica, sans-serif;
            }
            
            .navbar ul li {
              display: table-cell;
              text-align: center;
            }
            
            .navbar ul li a {
              font-weight: bold;
              color: grey;
              text-decoration: none;
              border: 2px solid #bab6b6;
              border-radius: 4px;
              background-color: #e8e1d4;
              padding: 5px 5vw 5px 5vw;
              opacity: 0.8;
            }
            
            .navbar ul {
              position: fixed;
              width: 100%;
              display: table;
              list-style: none;
            }
            
            .navbar {
              position: fixed;
              top: 0;
              left: 0;
              background-color: dimgrey;
              padding-right: 10px;
              float: right;
              padding: 15px 5px 0px 5px;
              width: 99.2vw;
              background-color: dimgrey;
              height: 37px;
            }
            #wrap{
                background-color: dimgrey;
            }
            #menulabel {
                color: lightgrey;
            }

JavaScript

window.onload = function() {
              $(".navbar ul li a").fadeOut(200);
              $(".navbar").slideUp("medium");
            };
            $(".navbar ul li a").mouseenter(function() {
              $(this).fadeTo(200, 1);
            });
            $(".navbar ul li a").mouseleave(function() {
              $(this).fadeTo(100, 0.8);
            });
            $(document).ready(function() {
              $("#wrap").mouseenter(function() {

                $(".navbar ul li a").fadeIn(100);
                $(".navbar").stop().slideDown("fast");
              });
              $("#wrap").mouseleave(function() {

                $(".navbar ul li a").fadeOut(200);
                $(".navbar").slideUp("medium");
              });
            });