JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li class="active"><a href="javascript:;">АВТОМОБИЛИ</a>
    <ul class="av">
			<li class="al"><a href="#" class="almera"><span class="titreck">ALMERA</span></a></li>
			<li class="sent"><a href="#" class="sentra "><span class="titreck1">SENTRA</span> </a></li>
			<li class="tiid"><a href="#" class="tiida"><span class="titreck2">TIIDA</span></a></li>
			<li class="juk"><a href="#" class="juke"><span class="titreck3">JUKE</span></a></li>
			<li class="qas"><a href="#" class="qashqai"><span class="titreck4">QASHQAI</span></a></li>
			<li class="x-tra"><a href="#" class="x-trail"><span class="titreck5">X-TRAIL</span></a></li>
			<li class="path"><a href="#" class="pathfinder"><span class="titreck6">PATHFINDER</span></a></li>
			<li class="patr"><a href="#" class="patrol"><span class="titreck7">PATROL</span></a></li>
		</ul>
    </li>
    <li><a href="javascript:;">СПЕЦПРЕДЛОЖЕНИЯ</a>
    <ul class="spec">
			<li class="akc"><a class="akcavt" href="#">АКЦИИ АВТОСАЛОНА</a></li>
			<li class="nov"><a href="#" class=" ">НОВОСТИ И СОБЫТИЯ</a></li>
			
		</ul>
      </li>
      <li id="line"></li>
      </ul>

CSS

#menu {
    padding: 0;
    margin: 0;
    font-size: 95%;
    position: relative;
    list-style: none;
    height: 40px;
    background: #000;
    }
#menu li {
    list-style: none;
    float: left;
    height: 33px;
    padding: 0;
    /* margin: 0; */
    /* width: 150px; */
    text-align: center;
    background: #171717;
    position: relative;
    /* padding-top: 12px; */
    /* margin: 0 0 0 0; */
    display: inline-block;
    height: 14px;
    padding: 12px 15px 14px;
    }
#menu li ul {
      list-style: none;
    padding: 0;
    margin: 0;
    /* width: 150px; */
    display: none;
    position: absolute;
    left: 0;
     top: 40px;
    }
#menu li ul li {
    height: 60px;
    margin: 0;
    /* width: 150px; */
    text-align: center;
    background: #7F7F7F;
    }
#menu li a {
    display: block;
    width: 150px;
    height: 40px;
    color: #fff;
    text-decoration: none;
    margin: 0;
    }
#menu li:hover ul, #menu li.jshover ul {


	border-radius: 0px 8px 8px 8px;
    box-shadow: 0px 0px 6px #cccccc;
    display: block;
    }
#menu li:hover, #menu li.jshover {
    background: #424242;
    }
#menu li#line {
    display: block;
    position: absolute;
    content:'';
    bottom: 0;
    left: 0;
    text-indent: -10000px;
    /* Шизофрения :) */
    height: 3px;
    width: 0;
    padding: 0;
    background: #ce2341;
}
ul.av  {
    width: 720px;
  }

ul.spec,ul.usl,ul.serv,ul.kompa,ul.kont{
    font-size: 80%;
}

span.titreck,span.titreck1, span.titreck2,span.titreck3, span.titreck4,span.titreck5,span.titreck6,span.titreck7,span.titreck8{
    font-size: 14px;
    position: absolute;
    padding-top: 45px;
    left: 0;
    right: 0;
}
li.akc,li.nov,li.kred,li.str,li.trade,li.obm,li.avto,li.tes,li.zap,li.zvon,li.vop,li.slyzh,li.tex,li.gara,li.malya,li.origi,li.acesses,li.ser-akc,li.zapser,li.okom,li.nashi,li.vaki,li.kont-dan,li.rezhim-rad,li.shema-proe,li.shema-avto,li.za-vop{
    height: 30px!important;
}

JavaScript

$(function () {
    var $menu = $("#menu");
    $line = $("#line"),
    $indicator = true,
    $active = $menu.find(".active"),
    default_pos = $active.offset().left - $menu.offset().left,
    default_width = $active.outerWidth();

    $line.css({left: default_pos,width: default_width});    

    $("#menu li").hover(function () {
        if (this===$active.get(0)) return;
        var self = $(this);                
        var diff = self.offset().left - $menu.offset().left;
        $line.stop().animate({
            width: self.outerWidth(),
            left: diff
        }, 400);
    }, function () {
        if (this===$active.get(0)) return;
        $line.stop().animate({
            width: default_width,
            left: default_pos
        },400);
    });

});