Адаптивное меню навигации, элементы «подворачиваются» друг под друга

Я надеюсь, что кто-то сможет указать мне правильное направление с тем, чего я надеюсь достичь. Я создаю адаптивный сайт и имею традиционное навигационное меню, охватывающее верхнюю часть, с несколькими элементами внутри.

Мне нужно, чтобы это меню сжималось, когда страница становится уже, но вместо того, чтобы ломать меню навигации, я хотел бы, чтобы элементы, которые не подходят, помещались под раскрывающуюся вкладку «Дополнительно...». Имеет ли это смысл? Вот графическое представление...

Таким образом, верхнее изображение будет иметь ширину 1024, а нижнее — ширину 768.

Контент в меню неизвестен, поэтому ширина может варьироваться, поэтому мне нужно рассчитать ширину комбинированных ссылок, а затем все, что больше этого, будет помещено в раскрывающийся список «Дополнительно».

Буду признателен за любые советы, просто пока не знаю, с чего начать.

Спасибо