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