JSFiddle - React, Tailwind, and code Playground

HTML

<div style="z-index:99999" id="new-menu-lower">
   <ul class="menuul">
  <li class="menuli round first_item">
    <div class="productImageWrapper"><a class="move" href="c-469-5345.aspx">Barbecues</a></div>
    
  </li>
  <li class="menuli round">
    <div class="productImageWrapper"><a class="move" href="c-604-345345345.aspx">Cartouches/Réservoirs</a></div>
    
  </li>
  <li class="menuli round">
    <div class="productImageWrapper"><a class="move" href="c-595-34545.aspx">Réchauds</a></div>
    
  </li>
  <li class="menuli round">
    <div class="productImageWrapper"><a class="move" href="c-501-345345.aspx">Glacières</a></div>
    
  </li>
  <li class="menuli round">
    <div class="productImageWrapper"><a class="move" href="c-540-34545.aspx">Lanternes</a></div>
    
  </li>
  <li class="menuli round">
    <div class="productImageWrapper"><a class="move" href="c-524-34543-diy.aspx">Jardin &amp; Bricolage</a></div>
    
  </li>
  <li class="menuli round last_item">
    <div class="productImageWrapper"><a class="move" href="c-468-435.aspx">Matelas</a></div>
    
  </li>
</ul>
</div>

CSS

div#new-menu-lower {
    border-radius: 3px 3px 3px 3px;
    border-top: 0 solid lightgrey;
    margin: 0 8px 10px;
}


#new-menu-lower ul {
    background: url("http://i46.tinypic.com/2mq6bk7.png") repeat scroll 0 0 transparent;
    border: 0 solid orange;
    border-radius: 7px 7px 7px 7px;
    display: block;
    height: 27px;
    width:960px;
}

#new-menu-lower ul li {
    border-right: 0 solid lightgrey;
    display: inline-block;
    float: left;
    height: 25px;
    margin-left: 1px;
    padding: 2px 5px 0;
    text-align: center;
}

html body div#new-menu-lower ul li:hover {
    background-image: url("http://i48.tinypic.com/b7f9n5.png");
    background-repeat: repeat;
    border-right: 0 solid lightgrey;
    display: inline-block;
    float: left;
    height: 25px;
    margin-left: 1px;
    padding: 2px 5px 0;
    text-align: center;
}


div#new-menu-lower ul li.first_item {
    //border-radius: 7px 0 0 7px;
    position: relative;
}

div#new-menu-lower ul.menuul li.menuli a {
    color: black;
    font-weight: bold;
    position: relative;
    top: 3px;
}

JavaScript

var els=$('div#new-menu-lower ul li');
elsWidth=new Array();
for(var i=0;i<els.length;i++){
 elsWidth[i]=$(els[i]).outerWidth(true);  
}

var total=0;
for(var i=0;i<elsWidth.length;i++){
 total+=elsWidth[i];  
}

var availWidthForEl=($('div#new-menu-lower ul').width()-total)/(els.length);
availWidthForEl=Math.floor(availWidthForEl*100)/100;

for(var i=0;i<els.length;i++){
 $(els[i]).css('width', $(els[i]).width()+availWidthForEl);
}