JSFiddle - React, Tailwind, and code Playground

HTML

<body id="body">
  <header id="top-section">
    <h1 id="main-title">Portfolio</h1>
  </header>
  <nav >
    <div id="site-nav">
      <ul class="navi">
        <li class="navi">Home</li>
        <li class="navi" id="navi-dropdown">Galleries <img src="http://www.rinnovopatenti.it/img/news/flag.png" width="10px" height="10px" /></li>
          <ul class="nav-dropdown">
            <li class="nav-dropdown">Real Estate</li>
            <li class="nav-dropdown">Aeriel</li>
            <li class="nav-dropdown">Scenic</li>
            <li class="nav-dropdown">People</li>
            <li class="nav-dropdown">Misc.</li>
          </ul>
        <li class="navi">Our Site</li>
        <li class="navi" style="border-right: none;">Contact</li>
      </ul>
    </div>
  </nav>
</body>

CSS

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

* {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  box-sizing: border-box;
}

#site-nav, #nav-dropdown { text-align: center; }
#site-nav ul, #navi-dropdown ul { list-style: none; }
#site-nav ul li, #navi-dropdown ul li { display: inline-block; }

header {
  background-color: #34495e;
}

ul.navi {
  background-color: rgb(225, 225, 225);
}

li.navi {
  padding: 20px;
  border-right: solid 1px #d3d3d3;
  color: #000000;
  cursor: pointer;
  border-bottom: inset 3px #bfbfbf;
  transition-duration: 0.3s;
}

li.navi:hover {
  background-color: #e74c3c;
  border-bottom: inset 3px #c0392b;
}

#main-title {
  font-size: 3em;
  text-align: center;
  color: #FFFFFF;
}

#main-subtitle {
  font-size: 0.4em;
  text-align: center;
  color: #FFFFFF;
  font-style: italic;
}

#top-section {
  padding: 40px 0 40px 0;
}

div#site-nav {
  
}

ul.nav-dropdown {
  display: none;
  position: fixed;
  width: 100%;
  background-color: rgb(235, 235, 235);
}

li.nav-dropdown {
  padding: 20px;
  border-right: solid 1px #d3d3d3;
  color: #000000;
  cursor: pointer;
  border-bottom: inset 3px #d9d9d9;
  transition-duration: 0.3s;
}

li.nav-dropdown:hover {
  background-color: #e74c3c;
  border-bottom: inset 3px #c0392b;
}

JavaScript

$(document).ready(function () {
    $("li#navi-dropdown").hover(
  function () {
     $('ul.nav-dropdown').slideDown('medium');
  }, 
  function () {
     $('ul.nav-dropdown').slideUp('medium');
  }
);
});