Dropdown nie zakrywa elementów pod menu strony.

Hejka, po dokończeniu podstawowych elementów na stronie wróciłem do menu i chcę zrobić wysuwany formularz logowania po kliknięciu na element menu z napisem logowanie. Do tej pory nie miewałem problemów z takimi rzeczami, ale teraz zupełnie nie wiem co robić.

Problem jest taki, że po kliknięciu na logowanie - miejsce, gdzie ma być formularz wysuwa się, ale nie zakrywa ono elementów pod menu, czyli w moim przypadku slidera. Wysunięta opcja jest pod tymi elementami.

<nav>
		<div class="container">
			<li style="padding-top: 10px;"> <i class="fa fa-home fa-lg" aria-hidden="true"></i> </li>
			<li id="1">AKUALNOŚCI</li>
			<li id="2">NASZA SZKOŁA</li>
			<li id="3">REKRUACJA</li>
			<li id="4">KONTAKT</li>
			<li id="5">DLA RODZICÓW</li>
			<li class="log">
				LOGOWANIE
				<div class="log-wrap">
					some text<br>
					<input type="text">test</input>
				</div>
			</li>

		</div>
			<div style="clear: both;"></div>
	</nav>

.log{
	float: right;
	background-color: #990033;
	position: relative;
	display: inline-block;
}
.log-wrap{
	position: absolute;
	top: 50px;
	right: 0;
	width: 300px;
	display: none;
	background-color: black;
}

$('.log').click(function(){
	$('.log-wrap').css('display', 'block');
});