How to make <li> expand with CSS (like Apple.com)

Question 1

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:

http://jsfiddle.net/Hp3JU/

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;
}

Question 2

Apple does it by adding a class to the nav element when the user focuses the search field.

Default State:

Active State:

active state

Thus, to mimic the same functionality you're going to need JavaScript to add a class to the ul.menu element. This class will change the width of the menu. Use CSS animations to control the sliding effect.

How to make <li> expand with CSS (like Apple.com)

http://jsfiddle.net/jMAzr/1/