Search code examples
csssubmenuhorizontal-scrolling

How to make sub-menus scrollable

I've got at least one sub-menu that is very long and another well on its way. It looks fine on desktop and mobile but I'd like to make these sub-menus scrollable so that it's not too long and/or overwhelms people.

I'm not at JavaScript yet so I need a simple CSS trick that will work. The closest I've come to is located here:

Scrolling Submenus

but it bunches everything up and only the last menu item appears. I've tried making it longer but nothing seems to work.

CSS:

.navbar-inverse .dropdown-menu > li > a {
  width: 185px;
  height: 400px;
  overflow-x: hidden;
  overflow-y: scroll;
  z-index: 1000 !important;
  position: fixed !important;
}

Any suggestions?

partyfavorz.com

Solution

  • just set a height to your List and overflow-y:

    .dropdown-menu {
     height: 500px; // change it as you like
     overflow-y: auto;
}