JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">	
<div id="header">
	<div id="logo"></div>
</div>	
    <div class="menu">
        <ul>
            <li class="m1"><a href="#"><span>О компании</span></a>
                 <ul>
                     <li><a href="#"><span>Знакомство</span></a></li>
                     <li><a href="#"><span>История</span></a></li>
                     <li><a href="#"><span>Команда</span></a></li>
                     <li><a href="#"><span>Деятельность</span></a></li>
                     <li><a href="#"><span>Знакомство</span></a></li>
                 </ul>
            </li>
            <li class="m2"><a href="#"><span>Проекты</span></a>
                <ul>
                     <li><a href="#"><span>Знакомство</span></a></li>
                     <li><a href="#"><span>История</span></a></li>
                     <li><a href="#"><span>Знакомство</span></a></li>
                     <li><a href="#"><span>История</span></a></li>
                 </ul>
            </li>
            <li class="m3"><a href="#"><span>Предложения</span></a></li>
            <li class="m4"><a href="#"><span>Контакты</span></a></li>
        </ul>
    </div>
        
    <div id="content">
       
    </div>
</div>		

<div id="footer"></div>

CSS

@charset "utf-8";
/* CSS Document */
* {
	margin:0;
	padding:0;
}
html { 
    background:url(../img/bg2.jpg) no-repeat top center;
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position: 0 auto; 
	background-color: #191718;
}
body {
	background: url(../img/right_black.png) repeat-y right top;
	font-family: Verdana, Geneva, sans-serif;
	color: #FFF;
    font-size: 11px;
}

p { 
    margin-bottom: 20px; 
    line-height: 1.4;
}
#main { margin:0 auto; display:block; width:100%; max-width:1380px; background: url(../img/left_black.png) repeat-y; min-height:600px; overflow:hidden;}
#header { width:56%; height:120px; background: rgba(0, 0, 0, .8); position: fixed; right:0; padding:0px 50px 0px 40px;}
#logo {width:400px; height:91px; display:block; float: right; margin:10px 20px 0 0; background:url(../img/logo.png) no-repeat;}

#content { display:block; float:right; width:56%; margin-right:30px; margin-top:140px; margin-bottom:60px; 
background: rgba(0, 0, 0, .4); padding:20px 20px 20px 40px;}
#content h1 { font-weight:normal; margin-bottom:20px; color: #6CF;}

.menu {
    margin-left: 30px;
    margin-top: 30px;
    position: fixed;
    height: 760px;
    display: block;
}
.menu a {
    behavior: url("PIE/PIE.htc");
}
.menu ul li {
    list-style:none;
    position: relative;
}
.menu ul li a {
	color: #FFF;
	display: block;
    font-size: 14px; 
	text-decoration: none;
	height: 100px;
	width: 100px;
	-moz-border-radius: 80px;
    -webkit-border-radius: 80px;
    -khtml-border-radius: 80px;  
    border-radius: 80px;
    
    border: 2px solid #FD7200;
    margin-bottom: 30px; 
    background: none;
    
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out; 
    text-align: center; 
}
.menu ul li span {
    margin-top:42%;
    display:block; 
}

.menu ul li.hovered a {
	text-decoration: none;
    font-size: 22px;
	color:...

JavaScript

$(document).ready(
        function() {
            $('.menu').mouseleave(
                /* leave active item opened */
                function() {
                    $('.menu > ul > li.active').addClass('hovered');
                }
            );
            $('.menu > ul > li').hover(
                function() {
                    if ( $('.menu li.active').size() ) {
                        if ( !$(this).hasClass('active') ) {
                            $('.menu li.active').removeClass('hovered');
                        }
                    }
                    $(this).addClass('hovered');
                }, function() {
                    if ( !$(this).hasClass('active') ) {
                        $(this).removeClass('hovered');
                    }
                }
            );
            $('.menu > ul > li').click(
                function() {
                    if ( $('.menu li.active').size() && !$(this).hasClass('active') ) {
                        $('.menu li.active').removeClass('active');
                    }
                    /* add 'active' styles for root item without children */
                }
            );
            $('.menu ul li ul li').click(
                function() {
                    if ( $('.menu li.active').size() && !$(this).hasClass('active') ) {
                        $('.menu li.active').removeClass('active');
                    }
                    $(this).addClass('active');
                    $(this).parent().parent().addClass('active');
                }
            );
        }
    );