Скрыть последние элементы из меню при переполнении

#html #css #menu #overflow

#HTML #css #меню #переполнение

Вопрос:

Как сделать меню с помощью CSS, чтобы последние элементы скрывались, когда ширина экрана меньше, чем меню.

  <style>
    #container { width: 800px; }
    #container li { width : 200px;}
    </style>
    <div id="container">
    <ul>
    <li>Home</li>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    </ul>
    </div>
  

Возможно ли скрыть опцию 3, когда размер экрана меньше 800 пикселей?

Для совершенства: можно изменить опцию 3 на кнопку «Еще», чтобы отобразить опцию 3 и другие возможные варианты (4, 5, 6….) когда нажать на нее?

Комментарии:

1. Для этого вам нужен javascript. CSS не может обнаружить переполнение

2. Можете ли вы опубликовать пример? Нет проблем с использованием javascript