JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<div class='menu_left'>
                <a href="/" class='logo'></a>
                
                <div class='head_menu'>
                    
                    <span class="out_top"><em class='arrow'></em><span class="in_top">DOTA 2</span></span>
                        <ul class="head_dropdown">
                            <li><a href="#">CS:GO</a></li>
                            <li><a href="#">LINEAGE 2</a></li>
                            <li><a href="#">BUTTLEFIELD 3</a></li>
                        </ul>
                </div>
                
   </div>

CSS

* {
    margin: 0;
    padding: 0;    
}

body {
    background: #000;
}

.menu_left {
    border-bottom: 3px #ED1C24 solid;
    position: relative;
    min-width: 233px;;
    height: 35px;
    
    z-index: 999;
    
    margin-top: 20px;
    margin-bottom: -6px;
    
    float: left;
}

.logo {
    background: url('http://thumbs4.ebaystatic.com/m/mhZFKXVN8VG7Qe8zNPcwEkQ/96.jpg') 0 center;
    display: block;
    margin-left: 1px;
    float: left;
    width: 96px;
    height: 20px;
}

.arrow {
    background: url('http://alpaca.org.ua/tpl/img/top_icons_sprite.png') 0 0;
    float: left;
    margin-top: 10px;
    margin-left: 17px;
    width: 13px;
    height: 10px;
}

.head_menu {
    display: inline-block;
    
    font-size: 14px;
    font-weight: bold;
    
    height: auto;
    width: auto;
    
    cursor: pointer;
    z-index: 999;
}

.head_menu:hover .head_dropdown {
    display: block;
}

.out_top {
    border-left: 1px #282828 dashed;
    border-right: 1px #282828 dashed;
    display: block;
    min-width: 100px;
    height: 30px;
    line-height: 30px;
    padding-right: 20px;
    
    margin-left: 25px;
    margin-top: -5px;
}

.in_top {
    color: #fff;
    float: left;
    margin-left: 4px;
}

.out_top:hover .in_top {
    color: #ec1c23;
}

.out_top:hover .arrow {
    background-position: -20px -8px;
}

.head_dropdown {
    overflow: hidden;
    display: none;
    margin-top: 13px;
    margin-left: -97px;
    margin-right: -7px;
    background-color: rgba(0, 0, 0, .5);
    width: 243px;
    height: 118px;
    z-index: 999;
}

.head_dropdown li {
    background-color: #141414;
    width: 223px;
    height: 30px;
    margin-top: 4px;
    margin-left: 10px;
    line-height: 30px;
    list-style: none;
}

.head_dropdown li:hover {
    background-color: #323232;
}

.head_dropdown li:first-child {
    margin-top: 10px;
}

.head_dropdown li a {
    color: #999999;
    display: block;
    padding-left: 6px;
    text-decoration: none;
    width: 223px;
   ...

JavaScript

$('.head_menu').mouseenter(function() {
                    $('.head_dropdown').css({height: '0'});
                    $('.head_dropdown').animate({height: '118px'}, 150);
                }).mouseleave(function() {
                    $('.head_dropdown').animate({height: '0'}, 150);
                });
                
                $('.head_dropdown li').on('click', function() {
                    var tex = $('.in_top').text();
                    var chois = $(this).find('a').text();
                    $('.in_top').text( chois );
                    $(this).find('a').text( tex );
});