W3.css Navigation - Dropdown menu block not Scrollable

[SMEfocus]

I am using "Navigation Bar with Dropdown" on https://www.w3schools.com/w3css/w3css_navigation.asp This works well. My only problem is that one of the menus is having 15 submenus (dropdown items). In this case case only 8 are shown till the bottom of the viewport and rest are not shown. (View Page Source has those items in the rendered HTML). Hence I would like to get help to add the vertical scrolling. I would like to know which class(es) should have Overflow attribute set to Auto. I am using Firefox browser V 72.x

Another solution could be to have multiple columns of submenus. Say 7 items per column.

Thanks.

 

[Ingolme]

You can add overflow to the w3-dropdown-content class and give it a max-height in order to cause the scrolling. On mobile devices, arranging the links into columns would likely get outside of the screen horizontally.

[SMEfocus]

On 2/12/2020 at 9:22 AM, Ingolme said:

You can add overflow to the w3-dropdown-content class and give it a max-height in order to cause the scrolling. On mobile devices, arranging the links into columns would likely get outside of the screen horizontally.

Perfect! On mobile, I am using "hamburger" menu so no worries but thanks for pointing out the pitfall of using multiple columns for submenus.