JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="css/style_j.css" type="text/css" media="screen" />
<div class="content">
    <ul id="sdt_menu" class="sdt_menu">
        <li> <a href="#">
                    <img src="SlideDownBoxMenu2/images/2.jpg" alt=""/>
                    <span class="sdt_active"></span>
                    <span class="sdt_wrap">
                        <span class="sdt_link">Home</span>
                        <span class="sdt_descr">Home</span>
                    </span>
                </a>

        </li>
        <li> <a href="#">
                    <img src="SlideDownBoxMenu2/images/1.jpg" alt=""/>
                    <span class="sdt_active"></span>
                    <span class="sdt_wrap">
                        <span class="sdt_link">File Managements</span>
                        <span class="sdt_descr">File Managements</span>
                    </span>
                </a>

            <div class="sdt_box"> <a href="#"><img src="SlideDownBoxMenu2/images/1.jpg" alt=""/>
                    <span class="sdt_active"></span>
                    <span class="sdt_wrap">
                        <span class="sdt_link">Retention</span>
                        <span class="sdt_descr">Retention</span>
                    </span> </a>
 <a href="#">Illustrations</a>
 <a href="#">Photography</a>

                <div class="sdt_box"> <a href="#">Retentionss </a>
 <a href="#">Illustrations</a>
 <a href="#">Photography</a>

                </div>
            </div>
        </li>
        <li> <a href="#">
                    <img src="SlideDownBoxMenu2/images/1.jpg" alt=""/>
                    <span class="sdt_active"></span>
                    <span class="sdt_wrap">
                        <span class="sdt_link">Portfolio</span>
                        <span class="sdt_descr">My work</span>
                    </span>
                </a>

            <div class="sdt_box"> <a href="#">Websites</a>
 <a href="#">Illustrations</a>
 <a...

CSS

ul.sdt_menu {
    margin:0;
    padding:0;
    list-style: none;
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    font-size:14px;
    width:1020px;
}
ul.sdt_menu a {
    text-decoration:none;
    outline:none;
}
ul.sdt_menu li {
    float:left;
    width:200px;
    height:85px;
    position:relative;
    cursor:pointer;
}
ul.sdt_menu li > a {
    position:absolute;
    top:0px;
    left:0px;
    width:200px;
    height:85px;
    z-index:12;
    background:transparent url(../images/overlay.png) no-repeat bottom right;
    -moz-box-shadow:0px 0px 2px #000 inset;
    -webkit-box-shadow:0px 0px 2px #000 inset;
    box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img {
    border:none;
    position:absolute;
    width:0px;
    height:0px;
    bottom:0px;
    left:85px;
    z-index:100;
    -moz-box-shadow:0px 0px 4px #000;
    -webkit-box-shadow:0px 0px 4px #000;
    box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap {
    position:absolute;
    top:25px;
    left:0px;
    width:200px;
    height:60px;
    z-index:15;
}
ul.sdt_menu li span.sdt_active {
    position:absolute;
    background:#111;
    top:85px;
    width:200px;
    height:0px;
    left:0px;
    z-index:14;
    -moz-box-shadow:0px 0px 4px #000 inset;
    -webkit-box-shadow:0px 0px 4px #000 inset;
    box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link, ul.sdt_menu li span span.sdt_descr, ul.sdt_menu li div.sdt_box a {
    margin-left:15px;
    text-transform:uppercase;
    text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link {
    color:#fff;
    font-size:24px;
    float:left;
    clear:both;
}
ul.sdt_menu li span span.sdt_descr {
    color:#0B75AF;
    float:left;
    clear:both;
    width:155px;
    /*For dumbass IE7*/
    font-size:10px;
    letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box {
    display:block;
    position:absolute;
    width:200px;
    overflow:hidden;
    height:170px;
    top:85px;
    left:0px;
    display:none;
   ...

JavaScript

javascript ">
            $(function() {
				/**
				* for each menu element, on mouseenter, 
				* we enlarge the image, and show both sdt_active span and 
				* sdt_wrap span. If the element has a sub menu (sdt_box),
				* then we slide it - if the element is the last one in the menu
				* we slide it to the left, otherwise to the right
				*/
                $('#sdt_menu > li').bind('mouseenter',function(){
					var $elem = $(this);
					$elem.find('img')
						 .stop(true)
						 .animate({
							'width':'170px',
							'height':'170px',
							'left':'0px'
						 },400,'easeOutBack')
						 .andSelf()
						 .find('.sdt_wrap')
					     .stop(true)
						 .animate({'top':'140px'},500,'easeOutBack')
						 .andSelf()
						 .find('.sdt_active')
					     .stop(true)
						 .animate({'height':'170px'},300,function(){
						var $sub_menu = $elem.find('.sdt_box');
						if($sub_menu.length){
							var left = '170px';
							if($elem.parent().children().length == $elem.index()+1)
								left = '-170px';
							$sub_menu.show().animate({'left':left},200);
						}	
					});
				}).bind('mouseleave',function(){
					var $elem = $(this);
					var $sub_menu = $elem.find('.sdt_box');
					if($sub_menu.length)
						$sub_menu.hide().css('left','0px');
					
					$elem.find('.sdt_active')
						 .stop(true)
						 .animate({'height':'0px'},300)
						 .andSelf().find('img')
						 .stop(true)
						 .animate({
							'width':'0px',
							'height':'0px',
							'left':'85px'},400)
						 .andSelf()
						 .find('.sdt_wrap')
						 .stop(true)
						 .animate({'top':'25px'},500);
				});
            });