title: CSS Vertical menu-submenu with scroll
body: <p>I am trying to make Vertical menu with a scroll bar.</p>
  
  <p>The problem is that the sub-menu hiding bellow the scroll-bar,
  <a href="http://jsfiddle.net/0Lxtmeyp/1/" rel="nofollow">here the preview</a> </p>
  
  <p>This is the code I am using</p>
  
  <p><strong>HTML code</strong></p>
  
  <pre><code>&lt;div class="scrollbar" id="ex4"&gt;
      &lt;div class="content"&gt;
          &lt;div id="menuwrapper"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Product 1&lt;/a&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Sub Product 1&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Sub Product 2&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Sub Product 3&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Product 2&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Product 3&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Faqs&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Where are we?&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;
  
                      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Product 1&lt;/a&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Sub Product 1&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Sub Product 2&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Sub Product 3&lt;/a&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Product 2&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Product 3&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Faqs&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Where are we?&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;
  
                          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Product 1&lt;/a&gt;
                                      &lt;ul&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Sub Product 1&lt;/a&gt;
                                          &lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Sub Product 2&lt;/a&gt;
                                          &lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Sub Product 3&lt;/a&gt;
                                          &lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Product 2&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Product 3&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Faqs&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Where are we?&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;
  
                              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Product 1&lt;/a&gt;
                                          &lt;ul&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Sub Product 1&lt;/a&gt;
                                              &lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Sub Product 2&lt;/a&gt;
                                              &lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Sub Product 3&lt;/a&gt;
                                              &lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Product 2&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Product 3&lt;/a&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Faqs&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Where are we?&lt;/a&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS code</strong></p>
  
  <pre><code>.scrollbar {
      width: 250px;
      height: 300px;
      background-color: lightgray;
      margin-top: 40px;
      margin-left: 40px;
      overflow-y: scroll;
      float: left;
  }
  .content {
      height: 450px;
  }
  #ex4::-webkit-scrollbar {
      width: 8px;
      background-color: #cccccc;
  }
  #ex4::-webkit-scrollbar-thumb {
      background-color: #333333;
      border-radius: 10px;
  }
  #ex4::-webkit-scrollbar-thumb:hover {
      background-color: #999999;
      border: 1px solid #333333;
  }
  #ex4::-webkit-scrollbar-thumb:active {
      background-color: #666666;
      border: 1px solid #333333;
  }
  #ex4::-webkit-scrollbar-track {
      border: 1px gray solid;
      border-radius: 10px;
      -webkit-box-shadow: 0 0 2px gray inset;
  }
  #menuwrapper ul,
  #menuwrapper ul li {
      margin: 0;
      padding: 0;
      list-style: none;
  }
  #menuwrapper ul li {
      background-color: #39255e;
      border-bottom: solid 1px white;
      width: 150px;
      cursor: pointer;
  }
  #menuwrapper ul li:hover,
  #menuwrapper ul li.iehover {
      background-color: #6679e9;
      position: relative;
  }
  #menuwrapper ul li a {
      padding: 5px 15px;
      color: #ffffff;
      display: inline-block;
      text-decoration: none;
  }
  #menuwrapper ul li ul {
      position: absolute;
      display: none;
  }
  #menuwrapper ul li:hover ul,
  #menuwrapper ul li.iehover ul {
      left: 150px;
      top: 0px;
      display: block;
  }
  #menuwrapper ul li:hover ul li:hover,
  #menuwrapper ul li.iehover ul li.iehover {
      background-color: #6679e9;
  }
  /* We style the color of level 2 links */
  
  #menuwrapper ul li ul li a {
      display: inline-block;
      width: 120px;
  }
  #menuwrapper ul li:hover ul li ul,
  #menuwrapper ul li.iehover ul li ul {
      position: absolute;
      display: none;
  }
  #menuwrapper ul li:hover ul li:hover ul,
  #menuwrapper ul li.iehover ul li.iehover ul {
      display: block;
      left: 150px;
      top: 0;
  }
  #menuwrapper ul li:hover ul li:hover ul li,
  #menuwrapper ul li.iehover ul li.iehover ul li {
      background: #39255e;
  }
  #menuwrapper ul li:hover ul li:hover ul li:hover,
  #menuwrapper ul li.iehover ul li.iehover ul li.iehover {
      background: #6679e9;
  }
  #menuwrapper ul li:hover ul li:hover ul li a,
  #menuwrapper ul li.iehover ul li.iehover ul li a {
      color: #ffffff;
  }
  .clear {
      clear: both;
  }
  </code></pre>
  
  <p>Can anybody see the problem ?</p>