JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
<ul class="nav site-nav" id="nav">
    <li class="type-link depth-1 ">
    <a href="/"><span>Home</span></a>
    </li><li class="type-section depth-1  has-children">
    <a class="has-children-trigger" href="#"><span>Company</span><i></i></a>
        <ul class="children">
    <li class="type-article depth-2 ">
    <a href="/contents/company/mission"><span>Mission</span></a>
    </li><li class="type-article depth-2 ">
    <a href="/contents/company/management"><span>Management</span></a>
    </li><li class="type-article depth-2 ">
    <a href="/contents/company/career"><span>Careers</span></a>
    </li>    </ul>
    </li><li class="type-section depth-1  has-children">
    <a class="has-children-trigger" href="#"><span>Our services</span><i></i></a>
        <ul class="children">
    <li class="type-article depth-2  has-children">
    <a class="has-children-trigger" href="/contents/our-services/discover"><span>Discover</span><i></i></a>
        <ul class="children">
    <li class="type-article depth-3  has-children">
    <a class="has-children-trigger" href="/contents/our-services/discover/ultimate-y2h-2"><span>ULTImate Y2H Yeast two-hybrid</span><i></i></a>
        <ul class="children">
    <li class="type-article depth-4 ">
    <a href="/contents/our-services/discover/ultimate-y2h-2/ultimate-deliverables"><span>ULTImate Deliverables</span></a>
    </li><li class="type-article depth-4 ">
    <a href="/contents/our-services/discover/ultimate-y2h-2/specific-bait"><span>Specific Baits</span></a>
    </li>    </ul>
    </li><li class="type-link depth-3 ">
    <a href="/library/1"><span>ULTImate Libraries</span></a>
    </li><li class="type-article depth-3 ">
    <a href="/contents/our-services/discover/ultimate-y1h"><span>ULTImate Y1H</span></a>
    </li><li class="type-article depth-3 ">
    <a href="/contents/our-services/discover/ultimate-rna-y3h"><span>ULTImate RNA Y3H</span></a>
    </li><li class="type-article depth-3 ">
    <a...

CSS

* {margin:0; padding:0;}
html {line-height:1.3; padding:5px;}

li {list-style:none;}

.nav > li, .nav > li > a {display:inline-block; *display:inline; zoom:1;}

.has-children {position:relative;}
.children {position:absolute; top:100%; left:-99999em;}
.children > li {display:list-item; min-width:200px; float:left;}
.children > li > a {display:block;}
.has-children:hover > .children {left:0;}
.children .has-children:hover > .children {top:0; left:100%;}

.wrap {border-top:1px solid #777881; border-bottom:1px solid green; background:#464a4d url(../../images/admin/bgd_menu.png) repeat-x left top; margin-bottom:200px;} /* Conteneur menu */
.site-nav {font-size:12px; font-family:sans-serif;}
.site-nav a {padding:5px; background:#464a4d url(../../images/admin/bgd_menu.png) repeat-x left top; border-right: 1px solid #3c3c3d; color:#FFF;}
.site-nav .children a { border-bottom:1px solid red; border-top:1px solid blue; }
.site-nav .children li {background:#6f6f76 url(../../images/admin/bgd_menu_lili.gif) repeat-x 0 -30px;}
    .site-nav li:hover > a {background:url(../../images/admin/bgd_menu_liho.gif) repeat-x left top;}
    .site-nav .children li:hover > a {background:#3b3b3b url(../../images/admin/bgd_menu_lili.gif) repeat-x 0 0;}

.sit-nav {font-size:12px; font-family:sans-serif;}
.sit-nav a {padding:5px; background:#464a4d url(../../images/admin/bgd_menu.png) repeat-x left top; border-right: 1px solid #3c3c3d; color:#FFF;}
.sit-nav .children a {}
.sit-nav .children li {background:#6f6f76 url(../../images/admin/bgd_menu_lili.gif) repeat-x 0 -30px;}
    .sit-nav li:hover > a {background:url(../../images/admin/bgd_menu_liho.gif) repeat-x left top;}
    .sit-nav .children li:hover > a {background:#3b3b3b url(../../images/admin/bgd_menu_lili.gif) repeat-x 0 0;}