JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
  <header>
        <div class="header_wrapper container">

            <nav style="float: left">
                <ul class="menu">
                    <li>
                        <a href="index.html" class="logo">
                            <img src="img/logo.png" alt="" class="brand logo_def" width="125" height="39" /></a>
                    </li>
                    <li>
                        <h4 class="navHeader">Sam</h4>
                    </li>
                </ul>
                <div class="clear"></div>

            </nav>
            <nav>
                <ul class="menu">
                    <li class="current-menu-parent"><a href="javascript:void(0)">ACCUEIL</a>
                     
                    </li>
                    <li><a href="javascript:void(0)">PAGES</a>
                     
                    </li>
                    <li><a href="javascript:void(0)">FEATURES</a>
                     
                    </li>
                    <li><a href="javascript:void(0)">PORTFOLIO</a>
                        <ul class="sub-menu">
                          
                        </ul>
                    </li>
                    <li><a href="javascript:void(0)">GALLERIES</a>
                      
                    </li>
                    <li><a href="javascript:void(0)">BLOG</a>
                       
                    </li>
                    <li><a href="javascript:void(0)">CONTACTS</a>
                        
                    </li>
                </ul>
                <!-- .menu -->
                <div class="clear"></div>
            </nav>
        </div>
    </header>

CSS

/* H E A D E R */

.fixed_menu header {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	z-index:333;
}
.fixed_menu .fullscreen_layout header {
	top:auto;
	bottom:0px;
}
.fixed_menu.header2top .fullscreen_layout header {
	top:0px;
	bottom:auto;
}

.header_wrapper {
	text-align:center!important;
    width: 100%;
}

header .logo {
	margin:15px auto 15px auto;
	display:inline-block;
	float:left;
}
header .logo img {
	margin: -120px auto;
    display:block;
    float: left;
}

header nav {
	margin: 100px auto;
    display:inline-block;
	float:right;
}
.navHeader { margin: 22px auto;}
header nav ul.menu > li {
    float:left;
	display:inline-block;
	margin-right:25px;
	position:relative;
}
header nav ul.menu > li > a {
	font-size:14px;
	line-height:17px;
	padding:26px 0;
	font-weight:bold;
	display:block;
}

header nav ul.menu li .sub-menu {
	position:absolute;
	opacity: 0; 
	visibility:hidden;
	z-index:333;
}
header nav ul.menu > li > .sub-menu {
	left:50%;
	margin-left:-90px;
	width:180px;
	top:-999px;
}

header nav ul.menu  li > .sub-menu > li:first-child:before {
	content:'';
	opacity: 0.9!important; 
	position:absolute;
	left:50%;
	margin-left:-5px;
	top:-5px;
	display:block;
	width:0;
	height:0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid;
}
.fullscreen_layout header nav ul.menu > li:last-child > ul.sub-menu > li:first-child:before {
	margin-left:25px;
}

header nav ul.menu  li > .sub-menu > li .sub-menu > li:before {
	display:none;
}
header nav ul.menu > li > .sub-menu > li.current-menu-item:before,
header nav ul.menu > li > .sub-menu > li.current-menu-parent:before,
header nav ul.menu > li > .sub-menu > li:hover:before {
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #2a282f!important;
}
header nav ul.menu  li .sub-menu > li:before {
	display:none;
	padding:0;
	margin:0;
}

header nav ul.menu  li .sub-menu li {
	position:relative;
	border-top:3px...