The behaviour you are looking for requires a table layout to change the width of the other "cells" as one grows. I have created a simplified fiddle with this layout:
I've removed a couple of elements to simplify the example but the essence of the solution is to have an outer display: table
, then a display:table-row
then each "cell" is display:table-cell
. Give the "table" a fixed width and remove the negative margin on the :hover
psuedo-class to prevent the last cell overlapping its neighbor. You'll also need to remove your hardcoded fixed widths so your cells can collapse as required to make room.
<div class="table">
<ul class="menu">
<li>Produtos</li>
<li>Sites Prontos</li>
<li>Anuncie no Google</li>
<li>Facebook Para Negócios</li>
<li>Hospedagem</li>
<li><input class="search-field" type="search" /></li>
</ul>
</div>
CSS (Relevant parts only):
.table {
display: table;
width: 100%;
}
ul.menu {
display: table-row;
}
ul.menu > li {
display: table-cell;
}
.search-field {
width: 70px;
border-radius:10px;
transition: width 0.5s ease-in-out,margin-left 0.5s ease-in-out;
-webkit-transition: width 0.5s ease-in-out,margin-left 0.5s ease-in-out;
-moz-transition: width 0.5s ease-in-out,margin-left 0.5s ease-in-out;
-o-transition: width 0.5s ease-in-out,margin-left 0.5s ease-in-out;
animation-direction:reverse;
-webkit-animation-direction:reverse; /* Safari and Chrome */
border: 1px solid #353535;
height:18px;
padding: 0px 23px 4px;
color:#FFF;
}
.search-field:focus {
color:#000;
width: 140px;
height:20px;
}