Add scrollbar to menu item which has submenu items, without submenu items being hidden

I need to add a scrollbar to the courses menu list (see picture below). There are too many courses, and therefore goes over the page fold. The top navbar is fixed and therefore scrolling the page doesn't help. When I add the css: .navbar .navbar-inner .usermenu .dropdown ul.dropdown-menu.courses { overflow-y: auto; /* or : scroll */ } the ul for the course modules then does not display (ie. Orientation Module in the example picture below). I am assuming this is because the sub-submenu is nested in the ul that has overflow-y:auto and therefore is not displaying. How do I solve this issue of adding a scrollbar to the courses submenu but with the course submenu items not being hidden. Any solution is fine, css, jquery etc. The HTML and css is quite excessive as it is built in moodle, so there is a lot going on. The basic HTML structure is as follows: <ul class='nav'> <li class='dropdown'> <ul class='dropdown-menu'> <li class='dropdown-submenu courses'> <ul class='dropdown-menu'> <li class='dropdown-submenu courses'> <ul class='dropdown-menu'> <li class='dropdown-submenu course-submenu'> </li> . . . </ul> </li> . . . </ul> </li> </ul> </ul> </ul> EDIT: As I said, there is a lot of css that contributes to this but I will post a snippet: .navbar .navbar-inner .usermenu .dropdown ul.dropdown-menu { border: none; background: #2d2e2e; padding: 0px; border-radius: 0px; max-height: none !important; } .navbar .navbar-inner .usermenu .dropdown ul.dropdown-menu.courses{ overflow-y: auto !important; } [![add scroll to menu][1]][1] [1]: https://i.sstatic.net/asX3K.png