Make menu items disappear as screen shrinks

Most website menus are made with some kind of a <ul> <li> structure variation.
Usually they also have a mobile mode (hamburger) that comes into effect at some media query point.

What about menus or tabs with many items, the screen is being shrunk by the visitor but not enough for the mobile mode??  Items are breaking into two or more lines, usually damaging the design.

How can we solve this?
1. Make the font size dynamic by defining its size in a relative format:

2. Use JavaScript and check window size changes to hide menu items / tabs
3. Use the mobile menu (hamburger) earlier than intended
4. Menu items / tabs that are overflowing the window will simply disappear

In this post I’m focusing on solution number 4, which is actually pretty simple:
For the <ul>  of the menu (or any other container for the menu items / tabs) define in css:

This will make items than don’t have enough room disappear from the view.
Pay attention that the overflow property only works when the same element (<ul>) has a defined height. So set it as well in the css:

Since the items on the end will disappear take this into consideration when deciding where to place each menu item / tab.