title: Vertical scroll bar for menu with sub navigation
body: <p>I wanted to create a vertical menu with a huge number of sub navigation in it, because of the sub nav numbers it goes beyond the window size. If I give <code>overflow: auto;</code> and a specific height the third level menu will not be visible. I have seen navigation with scrolling but couldn't get it right.</p>
  
  <p>Check the working Code here: <a href="http://jsfiddle.net/PU9tr/" rel="nofollow">http://jsfiddle.net/PU9tr/</a></p>
  
  <p>Here is the HTML</p>
  
  <pre><code>    &lt;ul class="ver-menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Ver Menu- 1&lt;/a&gt;
              &lt;ul class="sub-menu-1"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 1&lt;/a&gt;
                      &lt;ul class="sub-menu-2"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 4&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 2&lt;/a&gt;
                    &lt;ul class="sub-menu-2"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 4&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 4&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 5&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 6&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 7&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 8&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 9&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 10&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 11&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 12&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 13&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 14&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 15&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 16&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 17&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 18&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 19&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 20&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 21&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 22&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 23&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 24&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Ver Menu- 2&lt;/a&gt;
              &lt;ul class="sub-menu-1"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 4&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Ver Menu- 3&lt;/a&gt;
              &lt;ul class="sub-menu-1"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ver sub Menu- 4&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Ver Menu- 4&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Ver Menu- 5&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Ver Menu- 6&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>Here is the CSS</p>
  
  <pre><code>            #page-wrap                          { width: 960px; margin: 25px auto; } 
              p                                   { margin: 0 0 8px 0; }
              a                                   { text-decoration: none; }
              img                                 { vertical-align: middle; }
              a img                               { border: 0; 180}
              ul                                  { list-style: none; }
              h1                                  { margin: 0 0 10px 0; }
              .ver-menu{ margin:0; padding:0; width: 200px}
              .ver-menu li{ margin:0; padding:0; display: block; position: relative;}
              body                                { font: 15px Helvetica, Sans-Serif; } 
              .ver-menu li a{ margin:0; padding:10px; display: block; background: #CCC; border-bottom: 1px dotted #999; color:#000;}
              .sub-menu-1, .sub-menu-2 {
                left: 161px;
                position: absolute;
                display: none;
                top: 0;
                  width: 150px;
                height: 150px;
              }
              .sub-menu-2{ left: 115px!important;}
              .ver-menu li:hover .sub-menu-1, .sub-menu-1 li:hover .sub-menu-2{ display: block;}
              .sub-menu-1 li{ position: relative;}
  </code></pre>