如何使用自定义滚动和固定位置显示左侧菜单右侧的子菜单

Question

我已经完成了左侧菜单的自定义滚动，但是当我尝试将子菜单显示在我的＆＃34; leftsidemenu＆＃34;右侧时，问题出现了。它隐藏在滚动div中

我已在左侧菜单3中添加了子菜单以进行测试

试图以这种模式实现

下面是代码

＆＃13;

＆＃13;

$(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();
	})
});

＆＃13;

/*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;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <div class="parent">
            <div class="scrollbar"></div>
            <div class="scrollable">
<div id="leftSideMenu">
<ul>
<li><a href="#" >Left Menu 1</a></li>
<li><a href="#" >Left Menu 2</a>
</li>
<li class="dropdown"><a href="#" >Left Menu 3</a>
<ul class="dropdown-list">
<li><a href="#" >Sub Left Menu 1</a></li>
<li><a href="#" >Sub Left Menu 2</a></li>
<li><a href="#" >Sub Left Menu 3</a></li>
<li><a href="#" >Sub Left Menu 4</a></li>
<li><a href="#" >Sub Left Menu 5</a></li>
<li><a href="#" >Sub Left Menu 6</a></li>
</ul>
</li>

<li><a href="#" >Left Menu 4</a></li>
<li><a href="#" >Left Menu 5</a></li>
<li><a href="#" >Left Menu 6</a></li>
<li><a href="#" >Left Menu 7</a></li>
<li><a href="#" >Left Menu 8</a></li>
<li><a href="#" >Left Menu 9</a></li>
<li><a href="#" >Left Menu 10</a></li>
<li><a href="#" >Left Menu 11</a></li>
<li><a href="#" >Left Menu 12</a></li>
<li><a href="#" >Left Menu 13</a></li>
<li><a href="#" >Left Menu 14</a></li>
<li><a href="#" >Left Menu 15</a></li>
<li><a href="#" >Left Menu 8</a></li>
<li><a href="#" >Left Menu 9</a></li>
<li><a href="#" >Left Menu 10</a></li>
<li><a href="#" >Left Menu 11</a></li>
<li><a href="#" >Left Menu 12</a></li>
<li><a href="#" >Left Menu 13</a></li>
<li><a href="#" >Left Menu 14</a></li>
<li><a href="#" >Left Menu 15</a></li>

</ul>
</div>
</div>
</div>
<div style="float:left;">test data</div>

＆＃13;

＆＃13;

＆＃13;

的jsfiddle

https://jsfiddle.net/1w69s2tt/