JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav_container">
      <div class="nav_header">
      </div>
      <div class="nav_content">
        <ul class="nav_list">
          <li>
	    <a href="/">
	      <span>Home</span>
	    </a>
          </li>
          <li id="categories_list">
	    <a href="#">
              <span>Categories</span>
	    </a>
          </li>
          <li id="me_list">
	    <a href="#">
	      <span>Me</span>
	    </a>
          </li>
          <li>
	    <a href="/categories/all">
	      <span>Games A-Z</span>
	    </a>
          </li>
        </ul>
      </div>
      <a href="/">
      <img src="/thumbs/header_image_white.png" style="position:relative; height: 103px;">
      </a>
    </div>
        <div id="categories_dropdown_menu">
	      <ul class="dropdown_menu">
		<li>
		  <a href="/">
		    <span>Action</span>
		  </a>
		</li>
		<li>
		  <a href="/">
		    <span>Action-Adventure</span>
		  </a>
		</li>
		<li>
		  <a href="/">
		    <span>Adventure</span>
		  </a>
		</li>
		<li>
		  <a href="/">
		    <span>Arcade</span>
		  </a>
		</li>
		<li>
		  <a href="/">
		    <span>Multiplayer</span>
		  </a>
		</li>
		<li>
		  <a href="/">
		    <span>Racing</span>
		  </a>
		</li>
		</br>
		<li>
		  <a href="/">
		    <span>Role-Playing</span>
		  </a>
		</li>
		<li>
		  <a href="/">
		    <span>Shooting</span>
		  </a>
		</li>
		<li>
		  <a href="/">
		    <span>Simulation</span>
		  </a>
		</li>
		<li>
		  <a href="/">
		    <span>Sports</span>
		  </a>
		</li>
		<li>
		  <a href="/">
		    <span>Strategy</span>
		  </a>
		</li>
		<li>
		  <a href="/">
		    <span>All</span>
		  </a>
		</li>
	      </ul>
	</div>

CSS

.dropdown_menu{
		text-align: center;
		margin: 0 auto;
	  }
      #categories_dropdown_menu {
		  display: none;
		  margin: 0;
		  padding: 0;
		  background: rgba(119, 119, 119, 1);
		  height: 100px;
		  border-bottom: 10px solid #4B4B4B;
		  margin-top: -9px;
          top: 500px;
          position: absolute;
	  }
	  
	  .dropdown_menu li {
		display: inline-block;
		height: 50px;
		line-height: 50px;
		padding: 0 30px;
	  }
	  .dropdown_menu li a:hover {
		color: #880000;
	  }
	  .nav_list
	  {
		  list-style: none;
		  margin: 0;
		  padding: 0 0px;
		  width: 668px;
		  white-space: nowrap;
		  font-size: 0;
	  }
	  
	  .nav_list li
	  {
		  display: inline-block;
		  border-right: 2px solid #a90000;
		  height: 26px;
		  line-height: 26px;
		  vertical-align: top;
		  text-transform: uppercase;
	  }

	  .nav_list li:hover
	  {
		  background: #777777;
	  }

	  .nav_list li a {
		padding: 6px 27px;
		font-size: 12px;
		color: #fff;
		transition: .1s ease-in-out;
	  }
.nav_header
{
	position: absolute;
	background: #A90000;
	width: 100%;
	height: 129px;
	top: 0;
	left: 0;
	right: 0;
}
.nav_content
{
	position: absolute;
	top: 103px;
	left: 0;
	right: 0;
	z-index: 1;
	margin-left: auto;
	margin-right: auto;
	background: #880000;
	width: 838px;
	height: 26px;
	overflow: hidden;
}
.nav_container
{
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
}

JavaScript

$(document).ready(function(){
    $("#categories_list").hover(function(){
        $("#categories_dropdown_menu").fadeToggle("slow");
    });
});