example html code

<li>
		<div class="dropdown" >
			<button type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				menu
			</button>
			<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
				<a class="dropdown-item" href="#">Option one</a>
				<a class="dropdown-item" href="#">Option two</a>
				<a class="dropdown-item" href="#">Option three</a>
			</div>
		</div>
</li>

javascript

$(function () {
    $('.dropdown').on('show.bs.dropdown', function() {
        $('body').append($(this).find('.dropdown-menu').css({
            position: 'absolute',
            left: $(this).offset().left,
            top: $(this).offset().top
        }).detach());
    });
});	

with context to body (z-index issue fix)