Menu behind the scroll bar

Replying a question from Stack Overflow

by Guilherme Lucio

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="scrollbar" id="ex4">
	<div class="content">
	<div id="menuwrapper">
			<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Products</a>
							<ul>
									<li><a href="#">Product 1</a>
											<ul>
													<li><a href="#">Sub Product 1</a></li>
													<li><a href="#">Sub Product 2</a></li>
													<li><a href="#">Sub Product 3</a></li>
											</ul>
									</li>
									<li><a href="#">Product 2</a></li>
									<li><a href="#">Product 3</a></li>
							</ul>
					</li>
					<li><a href="#">About Us</a>
							<ul>
									<li><a href="#">Faqs</a></li>
									<li><a href="#">Contact Us</a></li>
									<li><a href="#">Where are we?</a></li>
							</ul>
					</li>
					<li><a href="#">Help</a>

						<li><a href="#">Home</a></li>
						<li><a href="#">Products</a>
								<ul>
										<li><a href="#">Product 1</a>
												<ul>
														<li><a href="#">Sub Product 1</a></li>
														<li><a href="#">Sub Product 2</a></li>
														<li><a href="#">Sub Product 3</a></li>
												</ul>
										</li>
										<li><a href="#">Product 2</a></li>
										<li><a href="#">Product 3</a></li>
								</ul>
						</li>
						<li><a href="#">About Us</a>
								<ul>
										<li><a href="#">Faqs</a></li>
										<li><a href="#">Contact Us</a></li>
										<li><a href="#">Where are we?</a></li>
								</ul>
						</li>
						<li><a href="#">Help</a>


							<li><a href="#">Home</a></li>
							<li><a href="#">Products</a>
									<ul>
											<li><a href="#">Product 1</a>
													<ul>
															<li><a href="#">Sub Product 1</a></li>
															<li><a href="#">Sub Product 2</a></li>
															<li><a href="#">Sub Product 3</a></li>
													</ul>
											</li>
											<li><a href="#">Product 2</a></li>
											<li><a href="#">Product...

CSS

#menuwrapper {
  position: relative;
}

#menuwrapper ul {
  width:250px;
  height:300px;
  overflow-x: hidden;
  overflow-y: auto;
}

.scrollbar{
background-color:lightgray;
margin-top:40px;
margin-left:40px;
float:left;
width:250px;
height:300px;
}

#menuwrapper ul li {
  position: static !important;
}

.content{
min-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{
   ...

JavaScript

$(function() {
  // whenever we hover over a menu item that has a submenu
  $('#menuwrapper ul').children('li').on('mouseover', function() {
    var $menuItem = $(this),
        $submenuWrapper = $('> ul', $menuItem);
    
    console.log($menuItem, $submenuWrapper);
    
    // grab the menu item's position relative to its positioned parent
    var menuItemPos = $menuItem.position();
    
    // place the submenu in the correct position relevant to the menu item
    $submenuWrapper.css({
      top: menuItemPos.top,
      left: menuItemPos.left + Math.round($menuItem.outerWidth())
    });
  });
});