JSFiddle - React, Tailwind, and code Playground

HTML

<div id="oe_overlay" class="oe_overlay"></div>
<ul id="oe_menu" class="oe_menu">
<li><a href="">Collections</a>
<div>
<ul>
<li class="oe_heading">Summer 2011</li>
<li><a href="#">Milano</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Special Events</a></li>
<li><a href="#">Runway Show</a></li>
<li><a href="#">Overview</a></li>
</ul>
<ul>
<li class="oe_heading">Winter 2010</li>
<li><a href="#">Milano</a></li>
<li><a href="#">New York</a></li>
<li><a href="#">Behind the scenes</a></li>
<li><a href="#">Interview</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Download</a></li>
</ul>
<ul>
<li class="oe_heading">Categories</li>
<li><a href="#">Casual</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Underwear</a></li>
<li><a href="#">Nature Pure</a></li>
<li><a href="#">Swimwear</a></li>
<li><a href="#">Evening</a></li>
</ul>
</div>
</li>
<li><a href="">Projects</a>
<div style="left:-111px;"><!-- -112px -->
<ul>
<li class="oe_heading">Fashion Shows</li>
<li><a href="#">Milano</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Berlin</a></li>
<li><a href="#">New York</a></li>
<li><a href="#">London</a></li>
</ul>
<ul>
<li class="oe_heading">Events</li>
<li><a href="#">Fashion Party 2011</a></li>
<li><a href="#">Evening specials</a></li>
<li><a href="#">Fashion Day Milano</a></li>
<li><a href="#">Model Workshops</a></li>
</ul>
<ul>
<li class="oe_heading">Media</li>
<li><a href="#">Wallpapers</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Contest 2011</a></li>
<li><a href="#">Fashion Mania</a></li>
<li><a href="#">Green Earth Day</a></li>
</ul>
</div>
</li>
<li><a href="">Fragrances</a>
<div style="left:-223px;">
<ul class="oe_full">
<li class="oe_heading">Fashion Fragrances</li>
<li><a href="#">Deálure</a></li>
<li><a href="#">Violet Woman</a></li>
<li><a href="#">Deep Blue for Men</a></li>
<li><a href="#">New York, New York</a></li>
<li><a href="#">Illusion</a></li>
</ul>
</div>
</li>
<li><a...

CSS

.oe_overlay, .oe_menu, .oe_menu * {
    margin:0;
    padding:0;
}
.oe_overlay {
    background:#000;
    opacity:0;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
ul.oe_menu {
    list-style:none;
    position:relative;
    margin:0px 0px 0px 0px;
    width:960px;
    float:left;
    clear:both;
}
ul.oe_menu > li {
    width:20%;
    height:101px;
    padding-bottom:2px;
    float:left;
    position:relative;
}
ul.oe_menu > li > a {
    display:block;
    background-color:#101010;
    color:#aaa;
    text-decoration:none;
    font-weight:bold;
    font-size:12px;
    width:90px;
    height:80px;
    padding:10px;
    margin:1px;
    text-shadow:0px 0px 1px #000;
    opacity:0.8;
}
ul.oe_menu > li > a:hover, ul.oe_menu > li.selected > a {
    background:#fff;
    color:#101010;
    opacity:1.0;
}
.oe_wrapper ul.hovered > li > a {
    background:#fff;
    text-shadow:0px 0px 1px #FFF;
}
ul.oe_menu div {
    position:absolute;
    top:103px;
    left:1px;
    background:#fff;
    width:498px;
    height:180px;
    padding:30px;
    display:none;
}
ul.oe_menu div ul li a {
    text-decoration:none;
    color:#222;
    padding:2px 2px 2px 4px;
    margin:2px;
    display:block;
    font-size:12px;
}
ul.oe_menu div ul.oe_full {
    width:100%;
}
ul.oe_menu div ul li a:hover {
    background:#000;
    color:#fff;
}
ul.oe_menu li ul {
    list-style:none;
    float:left;
    width: 150px;
    margin-right:10px;
}
li.oe_heading {
    color:#aaa;
    font-size:16px;
    margin-bottom:10px;
    padding-bottom:6px;
    border-bottom:1px solid #ddd;
}

JavaScript

$(function () {
    var $oe_menu = $('#oe_menu');
    var $oe_menu_items = $oe_menu.children('li');
    var $oe_overlay = $('#oe_overlay');

    $oe_menu_items.bind('mouseenter', function () {
        var $this = $(this);
        $this.addClass('slided selected');
        $this.children('div').css('z-index', '9999').stop(true, true).slideDown(200, function () {
            $oe_menu_items.not('.slided').children('div').hide();
            $this.removeClass('slided');
        });
    }).bind('mouseleave', function () {
        var $this = $(this);
        $this.removeClass('selected').children('div').css('z-index', '1');
    });

    $oe_menu.bind('mouseenter', function () {
        var $this = $(this);
        $oe_overlay.stop(true, true).fadeTo(200, 0.6);
        $this.addClass('hovered');
    }).bind('mouseleave', function () {
        var $this = $(this);
        $this.removeClass('hovered');
        $oe_overlay.stop(true, true).fadeTo(200, 0);
        $oe_menu_items.children('div').hide();
    })
});