title: customising bootstrap menu issue
body: <p>I'm using bootstrap 3.3.7</p>
  
  <p>I have created dropdown menus and sub-menus down to 4 levels and so far it is working as expected using a combination of <code>li</code> and <code>ul</code> elements. The trouble is that some of the menu dropdowns are quite large, so I want to force scrollbars and height to contain the size of the dropdowns on screen. </p>
  
  <p>On my top level dropdown I've added the following style to the css:
  <code>height:300px; overflow-y:scroll; overflow:hidden;</code></p>
  
  <p>this has given me the desired effect on the first and second level dropdown (both have scroll bars and sit side by side) on the next level it displays inside the second level's container. when this should also be outside. (my code below doesn't show correctly using the code snippet tool for some reason, but if you place the code locally it shows correctly as far as it goes).</p>
  
  <p>Basically if you take the default way that bootstrap creates menu's and submenus where each submenu appears to the right of the parent and slightly down. My goal is to set the top of each level to the top of the first level menu keeping the height of each level the same with scrollbars when necessary. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: EvaluateFont, Arial, sans-serif;
    font-weight: bold;
    font-size: 9pt;
    padding-top: 70px;
  }  
  
  .navbar {
    height: 70px;
  }
  
  .navbar-toggle {
      top: -8px;
      left: 0px;
      width: 64px;
      height: 69px !important;
      border-style: none;
      padding-top: 0px;
      padding-bottom: 0px;
      padding-left: 20px !important;
      padding-right: 20px !important;
      background-color: lightblue;
      border-radius: 0 0 0 0;
      -webkit-border-radius: 0 0 0 0;
      -moz-border-radius: 0 0 0;
      float: left !important;
  }
  
  .scrollable-menu {
      height: 75px;
      overflow-x: hidden;
      overflow-y: auto;
  }
  
  .dropdown-menu { /* This is valid in the browser.*/
      width: max-content;
      border-bottom:none;
  }
  
  .dropdown-menu.main {
      top: 161px !important;
      height: 75px;
      border: 0;
      outline: none;
  }
  
  .wrapper {
      position: relative;
      cursor:auto;
  }
  
  li {
      position: static;
      list-style: none;
      color: #333;
      font-weight: 400;
      white-space: nowrap;
  
      // submenu
      ul.wrapper {
          // position on top of the menu item
          position: absolute;
          // top matches top
          //top: 0;
          // left matches 75% of menu item width
          // left: 75%;
          // show on top of the menu item
          z-index: 10; /*put this to -1 once click state has been implemented (will put it below the scrollbar)*/
          // do not show the submenu by default
          display: none;
      }
      // display the submenu when we hover on the menu item
      &amp;:hover &gt; .wrapper {
          display: block;
          top: 85px !important;
          border: 0;
          outline: none;
          left: 235px;
          width: auto;
      }
  }
  li.level-1, li.level-2, ul.level-3 {
      margin-left: -30px;
      
      a {
          display: block;
          padding: 5px;
          white-space: nowrap;
          clear: both;
      }
  }
  
  ul.level-2 &gt; li {
      margin-left: -25px;
  }
  
  ul.menu-list {
      background-color:#b200ff;
  }
  
  ul.wrapper.level-2 {
      background-color: #ff6a00;
      width: 100%;
  }
  
  ul.wrapper.level-3 {
      background-color: #451968;
      width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" /&gt;
          
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;    
          &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="navbar-collapse collapse"&gt;
                      &lt;ul class='nav navbar-nav'&gt;
                          &lt;li class="dropdown"&gt;
                              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;
                                  &lt;span class="fa fa-pencil"&gt;&lt;/span&gt; CREATE REPORT
                                  &lt;span class="caret"&gt;&lt;/span&gt;
                              &lt;/a&gt;                     
                              &lt;div class="dropdown-menu"&gt;
                                  &lt;ul&gt;
                                      &lt;li class="dropdown-submenu not-visible"&gt;&lt;a href="#" class="dropdown-header"&gt;&lt;span class="text"&gt;Choose a type of report.&lt;/span&gt;&lt;i class="fa fa-close pull-right icon-dropdown"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
      
                                  &lt;ul class="scrollable-menu menu-list"&gt;
                                      &lt;li class="parent level-1" &gt;
                                          &lt;a href="#"&gt;report set 1&lt;/a&gt;
                                          &lt;ul class="wrapper level-2" role="menu" aria-labelledby="comenu"&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;rep 1&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;rep 2&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;rep 3&lt;/a&gt;&lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/li&gt;
                                      &lt;li class="parent level-1"&gt;
                                          &lt;a href="#"&gt;rep set 2&lt;/a&gt;
                                          &lt;ul class="wrapper scrollable-menu menu-list level-2"&gt;
                                              &lt;li&gt;&lt;a href=""&gt;rep 1&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href=""&gt;rep 2&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href=""&gt;rep 3&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href=""&gt;rep 4&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href=""&gt;rep 5&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href=""&gt;rep 6&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href=""&gt;rep 7&lt;/a&gt;&lt;/li&gt;
                                              &lt;li class="parent level-2"&gt;
                                                  &lt;a href="#"&gt;rep 7 sub &lt;/a&gt;
                                                  &lt;ul class="wrapper menu-list level-3"&gt;
                                                      &lt;li&gt;&lt;a href=""&gt;sub 1&lt;/a&gt;&lt;/li&gt;
                                                      &lt;li&gt;&lt;a href=""&gt;sub 2&lt;/a&gt;&lt;/li&gt;
                                                      &lt;li&gt;&lt;a href=""&gt;sub 3&lt;/a&gt;&lt;/li&gt;
                                                  &lt;/ul&gt;
                                              &lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>