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

i need add scrollbar courses menu list (see picture below). there many courses, , therefore goes on page fold. top navbar fixed , therefore scrolling page doesn't help.

when add css:

.navbar .navbar-inner .usermenu .dropdown ul.dropdown-menu.courses {    overflow-y: auto; /* or : scroll */ } 

the ul course modules not display (ie. orientation module in example picture below). assuming because sub-submenu nested in ul has overflow-y:auto , therefore not displaying. how solve issue of adding scrollbar courses submenu course submenu items not being hidden. solution fine, css, jquery etc.

the html , css quite excessive built in moodle, there lot going on. basic html structure 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: said, there lot of css contributes post 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; } 

you should give ul max height of x pixels , apply overflow-y: scroll;.