مشكلة عند استخدام الـ dropdown في الـ bootstrap 4

السلام عليكم ورحمة الله وبركاته

لدي قائمة navbar تحتوي على عناصر وأحد هذه العناصر قائمة منسدلة 

المشكلة هي عند النقر على القائمة المنسدلة محتوى القائمة لا يظهر الا الجزء الموجود داخر الـ navbar فقط وعندما اضعها خارج الـ navbar تظهر بشكل جيد 

الصورة المرفقة توضح كيف تكون القائمة مخفية داخل النافبار

وهذا هو الكود المستخدم

<header>
	<nav>
		<div class="navbar navbar-expand-lg p-0">
			<button class="navbar-toggler bg-dark text-white m-1" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				القائمة
			</button>
			<a class="navbar-brand pl-2" href="#"><img src="css/images/logo.png" alt="logo" style="height:70px;" /></a>
			<div class="collapse navbar-collapse pr-0" id="navbarSupportedContent">
				<ul class="navbar-nav pr-0">
					<li class="nav-item">
						<a href="/" id="home"><i class="fa fa-home" aria-hidden="true"></i>
						<p>الرئيسية</p> <span class="sr-only">(current)</span></a>
					</li>
					<li class="nav-item"><a href="activities.php">
						التاء ومسيرة العطاء
						<p>مناشط وفعاليات</p>
					</a></li>
					<li class="nav-item"><a href="articles.php">
						مايسطرون
						<p>مقالات</p>
					</a></li>
					<li class="nav-item"><a href="media.php">
						لنسمو
						<p>مرئيات</p>
					</a></li>
					<li class="nav-item"><a href="#">
						متنفس لنسمعك
						<p>مشاركات ونقاشات</p>
					</a></li>
					<li class="nav-item"><a href="#">
						<i class="fa fa-info" aria-hidden="true"></i>
						<p>من نحن؟</p>
					</a></li>
				</ul>
			</div>
			
		<?php
		if($_SESSION['user_info'] == false){
			echo '
				<ul class="navbar-nav float-left pl-2">
					<li class="nav-item ml-2 d-none d-lg-block"><a id="link" class="nav-link" href="#search" data-toggle="collapse" aria-expanded="true" aria-controls="search"><i class="fa fa-search" aria-hidden="true"></i></a></li>
					<li class="nav-item border border-danger ml-1"><a href="login.php" id="link" class="btn btn-link">دخول</a></li>
					<li class="nav-item border border-danger d-none d-lg-block"><a href="register.php" id="link" class="btn btn-link">تسجيل</a></li>
				</ul>
		
			';
		}else {
			echo '
				<ul class="nav nav-pills float-left pl-2">
					  <li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">'.$_SESSION['user_info']->user_name.'</a>
						<div class="dropdown-menu">
						  <a class="dropdown-item" href="#">Action</a>
						  <a class="dropdown-item" href="#">Another action</a>
						  <a class="dropdown-item" href="#">Something else here</a>
						  <div class="dropdown-divider"></div>
						  <a class="dropdown-item" href="#">Separated link</a>
						</div>
					  </li>
				</ul>
		
			';
		}
		?>
		</div>
	</nav>
	<form>
	  <input type="text" id="search" class="collapse" name="search" placeholder="ابحث عن...">
	</form>
	
</header>