JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div id="menu">
            <ul>
                <li class="active">
                    <a href="#">XЙ™bЙ™rlЙ™r</a>
                </li>
 
                <li>
                    <a href="#">Media</a>
                </li>
 
                <li>
                    <a href="#">Döyüşçülərin bioqrafiyası</a>
                </li>
 
                <li>
                    <a href="#">MЙ™Еџhur liqalar</a>
                </li>
 
                <li>
                    <a href="#">AzЙ™rbaycan klublarД±</a>
                </li>
            </ul>
        </div>

CSS

#menu {
    width: 710px;
    margin: 0 290px 0 0;
}
 
#menu ul {
    list-style: none;
}
 
#menu li {
    display: table-cell;
    width: auto;
    text-align: center;
    vertical-align: middle;
    background: linear-gradient(#999, #666);
    position:relative;
    
}
 
#menu li:hover {
    text-decoration: underline;
    background: #111;
   
}
 
#menu a {
    display: table-cell;
    width: 1000px;
    height: 109px;
    color: #fff;
    text-decoration: none;
    vertical-align: middle;
}
 
#menu .active {
        height: 109px;
       
}
#menu .active:before{
    content:' ';
    display:block;
    position:absolute;
    top:-10px;
    z-index:999;
    height:10px;
    background:linear-gradient(#aaa, #999);
    width:100%;
}
#menu .active:hover:before{
    content:' ';
    display:block;
    position:absolute;
    top:-10px;
    z-index:999;
    height:10px;
    background:#111;
    width:100%;
}

#menu .active:after{
    content:' ';
    display:block;
    position:absolute;
    bottom:-10px;
    z-index:999;
    height:10px;
    background:linear-gradient(#666, #555);
    width:100%;
}
#menu .active:hover:after{
    content:' ';
    display:block;
    position:absolute;
    bottom:-10px;
    z-index:999;
    height:10px;
    background:#111;
    width:100%;
}

JavaScript

var lis = document.querySelectorAll('#menu ul li');
for(var i in lis){
    lis[i].onclick = function(){
        document.querySelector('#menu ul li.active').className = document.querySelector('#menu ul li.active').className.replace('active');
        this.className = this.className + ' active';
    }
}