JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:100%;height:46px;background:#575f6b;position:fixed;z-index:1;">
 
 
 <nav> 
 <ul> 
 <li><a href="#" class="uma">Файлы</a></li> 
 <li><a href="#" class="uma2">Раздел</a></li> 
 <li><a href="#" class="uma2">Раздел</a></li> 
 <li><a href="#" class="uma2">Раздел</a></li> 
 <li><a href="#" class="uma2 exit">Назад<div class="arrow-left"></div></a></li> 
 <li style="display:none"><a href="#" class="uma">Сообщения<span class="badge" style="display:none">2</span></a></li> 
 </ul> 
 </nav>
</div>

CSS

.arrow-left {
 width:0px;
 height:0px;
 border-top:5px solid transparent;
 border-left:5px solid #f7f7f7;
 border-right:5px solid transparent;
 border-bottom:5px solid transparent; 
 margin:0 auto; 
 display:inline-block;
 margin-left:6px;
}

*, .a, .li, .ul {
 margin:0;
 padding:0;
 outline:none;
 text-decoration:none;
 font-family:Tahoma;
 font-size:12px;
 font-weight:bold;
 list-style:none;
}


nav { 
 height: 26px; 
 width: 100%;
 margin:0 auto;
 right:0;
} 
nav ul { 
 float:right;
 display: inline-block; 
 vertical-align: baseline; 
 zoom: 1; 
 *display: inline; 
 *vertical-align: auto; 
} 
nav li { 
 float: left; 
} 
nav a { 
 position: relative; 
 display: block; 
} 

.uma, .uma2{
 cursor:pointer;
 float:right;
 display:block;
 height:46px;
 line-height:46px;
 font-size:12px;
 font-weight:bold;
 font-family:Tahoma;
 text-decoration:none;
 color:#f8f8f8;
 padding:0 14px 0 13px;
} 
.uma:hover, .uma2:hover {
 background:url(''), -moz-linear-gradient(top, #d38e37, #c7783d);
 background:url(''), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d38e37), color-stop(100%,#c7783d));
 background:url(''), -webkit-linear-gradient(top, #d38e37, #c7783d);
 background:url(''), -o-linear-gradient(top, #d38e37, #c7783d);
 background:url(''), -ms-linear-gradient(top, #d38e37, #c7783d);
 background:url(''), linear-gradient(top, #d38e37, #c7783d);
}
.uma2.exit {
 background:url(''), -moz-linear-gradient(top, #f89c28, #e98030);
 background:url(''), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f89c28), color-stop(100%,#e98030));
 background:url(''), -webkit-linear-gradient(top, #f89c28, #e98030);
 background:url(''), -o-linear-gradient(top, #f89c28, #e98030);
 background:url(''), -ms-linear-gradient(top, #f89c28, #e98030);
 background:url(''), linear-gradient(top, #f89c28, #e98030);
}
.uma:active, .uma2:active {
 box-shadow:inset 0 0 4px rgba(0,0,0,0.62);
 padding:0 14px 0 12px;
 border:1px solid rgba(0,0,0,0.5);
 background:url(''),...

JavaScript

$('.uma2').css({display:'none'});
 $(document).ready(function(){ 
 $(".uma").click(function(){ 
 setTimeout(function() {$('.uma').hide('fast');}, 0);
 setTimeout(function() {$('.uma2').show('fast');}, 0); 
 }); 
 $(".exit").click(function(){ 
 setTimeout(function() {$('.uma2').hide('fast');}, 0);
 setTimeout(function() {$('.uma').show('fast');}, 0); 
 }); 
 });