Perfect Scrollbar Postion Unset

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.2/css/perfect-scrollbar.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.2/js/min/perfect-scrollbar.jquery.min.js"></script>
			<div id="body-container">
				<div id="nav-container">
					<ul class="menu">
						<li>
							<img src="https://placeholdit.imgix.net/~text?txtsize=22&txt=100&w=100&h=100">
							<ul class="sub-menu">
								<li><img src="https://placeholdit.imgix.net/~text?txtsize=22&txt=sub&w=100&h=100"></li>
								<li><img src="https://placeholdit.imgix.net/~text?txtsize=22&txt=sub&w=100&h=100"></li>
							</ul>
						</li> 
						<li><img src="https://placeholdit.imgix.net/~text?txtsize=22&txt=100&w=100&h=100"></li> 
						<li><img src="https://placeholdit.imgix.net/~text?txtsize=22&txt=100&w=100&h=100"></li> 
						<li><img src="https://placeholdit.imgix.net/~text?txtsize=22&txt=100&w=100&h=100"></li> 
						<li><img src="https://placeholdit.imgix.net/~text?txtsize=22&txt=100&w=100&h=100"></li> 
						<li><img src="https://placeholdit.imgix.net/~text?txtsize=22&txt=100&w=100&h=100"></li> 
					</ul>
				</div>
			</div>

CSS

#body-container{
    background: #f2f2f2;
    height: 400px;
    display: block;
}

#nav-container { 
	position:relative;
	padding:0px; 
	width: 400px; 
	height: 100px; 
	overflow-x: auto; 
	overflow-y:hidden; 
	padding: 0 20px;
    white-space: nowrap;
}

.menu{
    max-width: 200px;
    white-space: nowrap;
    display: inline;
}

.menu li{
    display: inline;
    list-style: none;
}

ul.sub-menu {
  position: absolute;
  bottom: 100px;
}

JavaScript

$(document).ready(function ($) {
  $('#nav-container').perfectScrollbar({
  suppressScrollX: true
  });
});