Адаптивное выпадающее меню

[LADYX]

Добрый день! Подскажите, пожалуйста, как сделать так, чтобы при уменьшении экрана ссылки помещались в выпадающее меню? А именно не все сразу, а поочередно, по мере их выхода за пределы видимости экрана. Спасибо!

<style>
.header-item {
	padding: 7px 0;
}
.hi {
	display: inline-block;
}
.hi:after {
	content: '|';
	margin: 0 17px 0;
	display: inline-block;
	color: #ccc;
	vertical-align: middle;
}
</style>
<div class="header-item">
<div class="hi"><a href="#">Первый пункт</a></div>
<div class="hi"><a href="#">Второй пункт</a></div>
<div class="hi"><a href="#">Третий пункт</a></div>
<div class="hi"><a href="#">Четвертый пункт</a></div>
<div class="hi"><a href="#">Пятый пункт</a></div>
<div class="hi"><a href="#">Шестой пункт</a></div>
<div class="hi"><a href="#">Седьмой пункт</a></div>
<div class="hi"><a href="#">Восьмой пункт</a></div>
</div>

[Dilettante_Pro]

LADYX,
А где у вас пределы видимости? И каким же должен быть экран? И куда тогда выпадать?

<style>
.header-item {
	padding: 7px 0;
}
.hi {
	display: inline-block;
}
.hi:after {
	content: '|';
	margin: 0 17px 0;
	display: inline-block;
	color: #ccc;
	vertical-align: middle;
}
</style>
<div class="header-item">
<div class="hi"><a href="#">Первый пункт</a></div>
<div class="hi"><a href="#">Второй пункт</a></div>
<div class="hi"><a href="#">Третий пункт</a></div>
<div class="hi"><a href="#">Четвертый пункт</a></div>
<div class="hi"><a href="#">Пятый пункт</a></div>
<div class="hi"><a href="#">Шестой пункт</a></div>
<div class="hi"><a href="#">Седьмой пункт</a></div>
<div class="hi"><a href="#">Восьмой пункт</a></div>
</div>

[LADYX]

Все ссылки расположены в ряд, в блоке шириной 100%, который растянут на весь экран. Мне нужно, чтобы при уменьшении окна браузера ссылки, которые не помещаются, собирались в отдельный блок, т.е. появляется кнопка "еще", при нажатии на которую этот блок открываем. Стили мне не обязательны, мне главное нужен сам механизм.

[Dilettante_Pro]

LADYX,
Вы указали как критерий включения ссылок в отдельный блок

поочередно, по мере их выхода за пределы видимости экрана

В вашем примере (см. пост 2) ссылки занимают 2 строки. Если сжать экран до одной строки и ссылки со второй строки разместить в отдельный блок, то куда он будет выпадать?
Какая-то очень странная постановка задачи.

[LADYX]

Ссылки, которые перемещаются на вторую строчку по мере уменьшения экрана, нужно перемещать в отдельный блок, который будет открываться на кнопку "еще". В этот блок должны перемещаться все ссылки, которые не помещаются в одну строчку. А куда выпадать? Ну например сюда - http://codepen.io/joshgreen/pen/yxmfv