Доброго времени суток, собственно вопрос, как лучше реализовать поведение блоков при адаптации, вот на этом примере
maxmixgames.com


Повторюсь, что я имею ввиду поведение блоков при изменение расширения.
ну вот собственно набросок решения на CSS, но у него есть свои недостатки.
http://cdpn.io/JLoFq

Может лучше как здесь pinterest.com ? но как оно здесь реализованно ?

п.с. есть красивое решение, но правда на порно сайте, даже не знаю, можно ли выкладывать здесь пример

как говориться, сам пошутил, сам посмеялся. Вот вроде оптимальное решение
http://habrahabr.ru/sandbox/37498/

Изначально у меня было 2 способа реализации:
1. Это через фиксированные фоны для каждой ссылки. Этот способ сразу отошел, так как при изменении количества букв в меню- все летело к чертям.
2. Ну и второй способ, это через <li><a><span></span></a></li>

Просидеть пришлось таки часа 2, чтобы настроить необходимое мне отображение. Отверстал на хроме. Вроде все ок, иду проверять кроссбраузерность. Во всех остальных браузерах была 1 маленькая гадость. А именно то, что почему то backgound <span> смещался на 1 px вверх. При чем и смещался он странно. В мозиле при стандартном просмотре смещение было, но стоило увеличить область просмотра (ctrl+) как этот пиксель ставал на место, еще жму ctrl+, опять это смещение. И так вот по очереди. В других браузерах была таже история, лишь с тем отклонением , что при стандартном просмотре было все ОК, но стоило увеличить или уменшьшить, начиналось смещение.

Не знаю, но почему то не захотелось в тот момент понимать и (если это возможно ) решать данную проблему. Воспользовался советом tszyan ( и почему сразу так не сделал ? да потомучто мало опыта ) и все это проделал с использованием только <li> и <a>.

В результате получем то, что хотели.

Всем спасибо за внимание

Сверстаю за 1$ psd to html/css.
Оплата только в том случае, если вам понравиться моя работа.