title: How to display sub menu in right for a left side menu with custom scroll and fixed position
body: <p>I have done already the custom scroll for my left side menu, but the issue comes when I am trying to display the sub menu to right side of my "leftsidemenu" its hidden inside the scroll div</p>
  
  <p>I have added the submenu in  left menu 3 for testing purpose</p>
  
  <p><strong>trying to achieve in this pattern</strong>
  <a href="https://i.stack.imgur.com/z4a2K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z4a2K.png" alt="enter image description here"></a></p>
  
  <p><strong>below is the code</strong> </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-js lang-js prettyprint-override"><code>$(document).ready(function(){
  /*scroll*/
    var $scrollable = $('.scrollable');
    var $scrollbar  = $('.scrollbar');
     var $windowHeight = $(window);
    $scrollable.outerHeight(true);
    var H   = $windowHeight.outerHeight(true);
    var sH  = $scrollable[0].scrollHeight;
    var  sbH = H*H/sH;
  
  
  
  $('.scrollbar').height(sbH);
  
  $scrollable.on("scroll", function(){
  
      $scrollbar.css({top: $scrollable.scrollTop()/H*sbH });
  });
  /*menu*/
   var parentHeight = $(window).height();
   $(".parent").css({"height":parentHeight})
   $(window).resize(function(){
   var parentHeight = $(window).height();
   $(".parent").css({"height":parentHeight})
   });
   $("#leftSideMenu li[class='dropdown']").on("click", function(){
       $(".dropdown-list",this).toggle();
   })
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*scroll css*/
  .parent{
      position:relative;
      overflow:hidden;
      width:230px;
      background:#ddd;
   float:left;
  }
  .scrollable{
        overflow-y:scroll;
     overflow-x:hidden;
        width: 250px;
        height:100%;
  
  }
  .scrollbar{
  
      position:absolute;
      overflow:auto;
      top:0px;
      right:0px;
      z-index:2;
      background:#444;
      width:7px;
      border-radius:5px;
   opacity:0.7;
  }
  
  /*menu*/
  #leftSideMenu { width:250px; }
  #leftSideMenu ul { list-style:none; padding:0; margin:0; background-color:#0FACF3; }
  #leftSideMenu ul li {  }
  #leftSideMenu ul li a { padding:15px 5px; display:block; color:#fff; font-size:14px; border-bottom:1px solid #ccc;}
  #leftSideMenu ul li .dropdown-list { display:none; left:250px; position:absolute; z-index:10000;}
  #leftSideMenu ul li .dropdown-list li a { padding:10px 15px 10px 25px;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;div class="parent"&gt;
              &lt;div class="scrollbar"&gt;&lt;/div&gt;
              &lt;div class="scrollable"&gt;
  &lt;div id="leftSideMenu"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#" &gt;Left Menu 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Left Menu 2&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="dropdown"&gt;&lt;a href="#" &gt;Left Menu 3&lt;/a&gt;
  &lt;ul class="dropdown-list"&gt;
  &lt;li&gt;&lt;a href="#" &gt;Sub Left Menu 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Sub Left Menu 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Sub Left Menu 3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Sub Left Menu 4&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Sub Left Menu 5&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Sub Left Menu 6&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  
  &lt;li&gt;&lt;a href="#" &gt;Left Menu 4&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Left Menu 5&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Left Menu 6&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Left Menu 7&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Left Menu 8&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Left Menu 9&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Left Menu 10&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Left Menu 11&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Left Menu 12&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Left Menu 13&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Left Menu 14&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Left Menu 15&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Left Menu 8&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Left Menu 9&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Left Menu 10&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Left Menu 11&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Left Menu 12&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Left Menu 13&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Left Menu 14&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Left Menu 15&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="float:left;"&gt;test data&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>jsfiddle</strong></p>
  
  <p><a href="https://jsfiddle.net/1w69s2tt/" rel="nofollow noreferrer">https://jsfiddle.net/1w69s2tt/</a></p>