Как сделать такое адаптивное меню?

Question

[TANK_IST]

Есть меню

<ul class="nav">
	<li><a href="#">О клинике</a></li>
	<li><a href="#">Новости</a></li>
	<li><a href="#">Отзывы</a></li>
	<li><a href="#">Прайс-лист</a></li>
	<li><a href="#">Акции</a></li>
	<li><a href="#">Вопрос-ответ</a></li>
	<li><a href="#">Полезная информация</a></li>
	<li><a href="#">Контакты</a></li>
</ul>

Как сделать так чтобы при разной ширине меню изменялось?


Всё упирается в ширину пунктов. Нужно чтобы слова в пункте меню были в одной строке.
Как сделать подобное только на css?

Answer 1

[Сергей Протько]

media queries

Answer 2

[Виталий Киренков]

li { width: 25%; float: left;}
@media (max-width: 960px){
li {width: 33%;}
}