JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head lang="ru">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>MENU</title>

    <link rel="stylesheet" href="main.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$("ul.arrow-drop-down").parent().append("<span></span>");

	$("ul.arrow-drop-down li span").click(function() {

		$(this).parent().find("ul.arrow-drop-down").slideDown('fast').show();

		$(this).parent().hover(function() {
		}, function(){
			$(this).parent().find("ul.arrow-drop-down").slideUp('slow');
		});

		}).hover(function() {
			$(this).addClass("subhover");

			$(this).removeClass("subhover");
	});

});
</script>
</head>
<body>
    	<ul class="header-menu">
            <li class="active" ><a href="#">ГЛАВНАЯ</a></li>
        	<li><a href="/">ФОРУМ</a></li>
        	<li><a href="/">НОВОСТИ</a></li>
        	<li><a href="/">ТУРНИРЫ</a></li>
            <li><a href="#">СКАЧАТЬ</a>
            <span class="arrow-drop-down" >&nbsp;</span>
                <ul class="menu">
                    <li><a href="#">Скачать игру</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">PHP</a></li>
                    <li><a href="#">AJAX</a></li>
                    <li><a href="#">Другое...</a></li>
                </ul>
        </li>
        	<li><a href="/twitch.html">СТРИМЫ</a></li>
        	<li><a href="/">СТАТИСТИКА</a></li>
        	<li><a href="/">КОМЕНТАРИЙ</a></li>
        	<li><a href="/">КОМАНДА</a></li>
        	<li><a href="/index.php?do=feedback">ОБРАТНАЯ СВЯЗЬ</a></li>
        </ul>
</body>
</html>

CSS

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-menu {
    overflow: hidden;
    background: url(bg-menu.gif) repeat-x #000;
}

.header-menu li {
    position: relative;
    float: left;
}
.header-menu li:hover {
    background: url(b-portal-menu.png) repeat-x 0 0;
}

.header-menu > li > a {
    display: block;
    padding: 12px 36px;
    border-left: 1px solid #353538;
    border-right: 1px solid #161618;
    color: #fff;
    text-decoration: none;
}
.header-menu > li > a:hover {
    border-left-color: #923C26;
}

.header-menu .arrow-drop-down {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 50px;
    background: url(b-portal-menu.png) no-repeat 0 -264px;
}

.header-menu .active, .header-menu .active:hover {
    background: url(b-portal-menu.png) repeat-x 0 -44px;
}
.header-menu .arrow-drop-down:hover {
    background: url(b-portal-menu.png) no-repeat 0 -352px;
}

 /*Вертикальное выпадающее меню*/

JavaScript

/*
 * jQuery 1.2.6 - New Wave Javascript
 *
 * Copyright (c) 2008 John Resig (jquery.com)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * $Date: 2008-05-24 14:22:17 -0400 (Sat, 24 May 2008) $
 * $Rev: 5685 $
 */
(function(){var _jQuery=window.jQuery,_$=window.$;var jQuery=window.jQuery=window.$=function(selector,context){return new jQuery.fn.init(selector,context);};var quickExpr=/^[^<]*(<(.|\s)+>)[^>]*$|^#(\w+)$/,isSimple=/^.[^:#\[\.]*$/,undefined;jQuery.fn=jQuery.prototype={init:function(selector,context){selector=selector||document;if(selector.nodeType){this[0]=selector;this.length=1;return this;}if(typeof selector=="string"){var match=quickExpr.exec(selector);if(match&&(match[1]||!context)){if(match[1])selector=jQuery.clean([match[1]],context);else{var elem=document.getElementById(match[3]);if(elem){if(elem.id!=match[3])return jQuery().find(selector);return jQuery(elem);}selector=[];}}else
return jQuery(context).find(selector);}else if(jQuery.isFunction(selector))return jQuery(document)[jQuery.fn.ready?"ready":"load"](selector);return this.setArray(jQuery.makeArray(selector));},jquery:"1.2.6",size:function(){return this.length;},length:0,get:function(num){return num==undefined?jQuery.makeArray(this):this[num];},pushStack:function(elems){var ret=jQuery(elems);ret.prevObject=this;return ret;},setArray:function(elems){this.length=0;Array.prototype.push.apply(this,elems);return this;},each:function(callback,args){return jQuery.each(this,callback,args);},index:function(elem){var ret=-1;return jQuery.inArray(elem&&elem.jquery?elem[0]:elem,this);},attr:function(name,value,type){var options=name;if(name.constructor==String)if(value===undefined)return this[0]&&jQuery[type||"attr"](this[0],name);else{options={};options[name]=value;}return this.each(function(i){for(name in...