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 & 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 10px 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 10px 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;
line-height: 25px;
}