JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  <div class="frame">
    <div id="header">       
      <a href="#" id="menu-trigger">Meniu<span class="arrow"></span></a>
        <div id="menu">
            <div class="column">
                <h3>Navigare</h3>
              <ul>
                  <li><a href="index.html">Prima pagina</a></li>
                  <li><a href="colectie-apa.html">Colectie Apa</a></li>
                  <li><a href="colectie-fum.html">Colectie Fum</a></li>
              </ul>
            </div>
            <!--/.column-->
        </div>


    <div class="container"> 
      <div class="main">
        <div id="mi-slider" class="mi-slider">
          <ul>
            <li><h4>Colibri</h4></a></li>
            <li><h4>Maci</h4></a></li>
            <li><h4>Cameleon</h4></a></li>
          </ul>
        </div>
    </div>


    <!-- /container -->

CSS

#wrapper{margin: 0px auto 0; width: 800px; }

.container {
width: 100%;
position: relative;

}

.frame {
  background: #fff;
  margin-top: 10px;
  padding-left:0;
  padding: 10px;
  height:30px;
  width: 100%;
  /*border-bottom: 1px solid #666;*/
}
#header {
  float: left;
  height: 10px;
  position: absolute;
  width: 100px;
  margin-left:-10px;
  
}

#menu-trigger {
  font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
  text-transform: uppercase;
  letter-spacing: 5px;
  color: #000;
  outline: none;
  -webkit-transition: color 0.2s linear;
  transition: color 0.2s linear;
}

#menu-trigger:hover {
  color: #888888;
}
#menu-trigger span.arrow {
  display: block;
  position: absolute;
  top: 2px;
  right: -15px;
  width: 12px;
  height: 12px;
  background: url(../images/menu-arrow_sprite.png) no-repeat;
}
#menu-trigger.open span.arrow {
  background-position: 0 -12px;
}

#menu {
 background: url("../images/trans-black_50.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: none;
    height: 120px !important;
    left: 0;
    margin-top: 4%;
    padding: 20px;
    width: 800px;
    z-index: 1000;
  border-bottom: 1px solid #666;
  border-top: 1px solid #666;
}
#menu .column {
  float: left;
  margin-left: 20px;
  width: 240px;
}
#menu .column:first-child {
  margin-left: 0;
}
#menu .column h3 {
  border: none;
  color: #066666;
  font-size: 1em;
  font-weight: bold;
  margin: 0 0 10px;
}
#menu .column ul {
  font-size: .75em;
  list-style: none;
}
#menu .column ul:first-child {
  margin-left: 0;
}
#menu .column ul li {
  /*border-bottom: 1px solid #666;*/
}
#menu .column ul li:first-child {
 /* border-top: 1px solid #666;*/
}
#menu .column ul li a {
  color: #666;
  display: block;
  padding: 10px;
  text-decoration: none;
  transition: padding-left .5s;
  -moz-transition: padding-left .5s;
  -ms-transition: padding-left .5s;
  -webkit-transition: padding-left .5s;
  -o-transition: padding-left .5s;
}
#menu...

JavaScript

$(document).ready(function(){
  var menu = $('#menu')
  $('#menu-trigger').click(function(event){
      event.preventDefault();
      if (menu.is(":visible"))
      {
          menu.slideUp(400);
          $(this).removeClass("open");
      }
      else
      {
          menu.slideDown(400);
          $(this).addClass("open");
      }
  }); 

});