Dropdown Menus in collapsed version display issue.

[WhiteDragonD]

I created a drop down menu then shortened the browser width to a mobile size.

<li class="nav-item">
	<a href="https://www.facebook.com/" class="nav-link"><i class="fa fa-facebook-square"></i> Facebook</a>
</li>

<li class="nav-item">
	<div class="dropdown">
		<button class="btn btn-primary btn-small dropdown-toggle" type="button" id="InfodropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			<i class="fa fa-info-circle"></i> Info
		</button>
		<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
			<a class="dropdown-item" href="/Page1.php">Page1</a>
			<a class="dropdown-item" href="/Page2.php">Page2</a>
		</div>
	</div>
</li>

<li class="nav-item">
	<a class="btn btn-danger"  role="button" href="https://tickets.com" target="_blank">Buy Tickets</a>
</li>

When looking at mobile size, the Page1 and Page 2 are behind the Buy Tickets button.

I did tweak the CSS to make it work, submitting this bug so you can take a look.

paper-kit.css changes
.dropdown .dropdown-menu {
position: relative;
}
.navbar .navbar-nav .dropdown-menu {
/** Commenting out for collapse menu overlay
height: 400px;
overflow-y: scroll;
**/
}