JSFiddle - React, Tailwind, and code Playground

HTML

<div id="topSection">
  <div id="topNavSection">
    <ul>
        <li><a href="#">ТАНИЛЦУУЛГА</a></li>
      <li><a href="#">ХАМТРАН АЖИЛЛАХ</a></li>
      <li><a href="#">TV ZONE</a></li>
      <li><a href="#">АРХИВ</a></li>
      <li><a href="#">ХОЛБОО БАРИХ</a></li>
    </ul>
  </div>
  <div class="viewchannels">
    <span class="channel"><img src="http://www.gnus.mn/ubsnew/media/2011/11/ubs_live1.jpg" title="" /></span>
    <span class="channel"><img src="http://www.gnus.mn/ubsnew/media/2011/11/ubs_live2.jpg" title="" /></span>
    <span class="channel"><img src="http://www.gnus.mn/ubsnew/media/2011/11/ubs_live3.jpg" title="" /></span>
  </div>
</div>

CSS

#topSection {
  background-color: black;
  height: 25px;
  width: 100%;
}

#topNavSection {
}
#topNavSection ul {
  margin: 0px;
  padding: 0px;
}
#topNavSection ul li{
  float: left;
  display: block;
}
#topNavSection ul li a {
  line-height: 25px;
  font-size: 10px;
  color: white;
  padding: 0 8px;
}

.viewchannels {
  postion: absolute;
  top: 25px;  
  height: 25px;
  overflow: hidden;
}
.channel {
    float: left;
    width: 137px;
    height: 26px;
}
.channel img {
    position: absolute;
    top: -15px;
}

JavaScript

$(function() {
    $(".channel img").hover(function() {
        $(this).animate({
            'top': '0px'
        }, 100);
    }, function(){
        $(this).animate({
            'top': '-10px'
        }, 100);
    });
});