چگونه یک منو را شبیه psd با بوت استرپ 4 ایجاد کنیم

سلام می خوام یک منو را با بوت استرپ 4 شبیه عکس زیر پیاده سازی کنم

ولی شبیه عکس زیر برای من نمایش میده

این هم سورس هام

        <div class="col-md-2">
            <ul class="navbar-nav border-left">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                        ورود / ثبت نام
                    </a>
                    <div class="dropdown-menu border-danger text-right rounded-0 border-left-0 border-right-0 border-bottom-0">
                        <a class="btn btn-info" href="http://oxbir.ir">ورود به دیجی کالا</a>
                        <p>کاربر جدید هستید؟ <a href="#">ثبت</a></p>
                        <p><a href="#"><i class="fas fa-user"></i> پروفایل</a></p>
                        <p><a href="#"><i class="fas fa-shopping-bag"></i> پیگیری سفارش</a></p>
                    </div>
                </li>
            </ul>
        </div>

دقیقا مثل سایت دیجیکالا با بوت استرپ 4

html

<div class="container">
<div class="row">
<div class="col-3">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Menu" aria-controls="Menu"
aria-expanded="false" aria-label="نمایش فهرست"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="Menu">
<ul class="navbar-nav">
<li class="navbar-item dropdown">
<a href="#" class="nav-link" data-toggle="dropdown">ورود/ثبت نام<img src="img/chevron-down.svg" alt="drpdwn"
class="img-drp"></a>
<div class="dropdown-menu text-right m-3" style="width:300px;position: absolute;left:-111px;">
<div class="top"></div>     
<a href="#" class="btn btn-primary d-block m-3">ورود به دیجی کالا</a>
<span class="m-3">کاربر جدید هستید؟ <a href="#" class="link-sign">ثبت نام</a></span>
<hr>
<a href="#" class="d-block p-3 l-d"><img src="img/user.svg" alt="drpdwn" class="icon-menu">پروفایل</a>
<a href="#" class="d-block p-3 l-d"><img src="img/cart.svg" alt="drpdwn" class="icon-menu">پیگیری سفارش</a>
<div class="mosalath"></div>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>

Css

body {direction: rtl;}
a {text-decoration: none!important;}
.img-drp {width: 10px;margin-right: 20px;}
.link-sign {border-bottom: 1px dashed #17a2b8;}
.icon-menu {padding: 0 10px;}
.l-d:hover {background-color: #f4f4f4;}
.top {height: 5px;background-color: #ef5661;}
.dropdown-menu {padding: 0!important;}
.mosalath {
    width: 10px;
    height: 10px;
    border-left: 10px solid transparent;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ef5661;
    position: absolute;
    top: -20px;
    left: 95px;
}

تصویر کامل کدها منو با بوت استرپ 4

موفق و پیروز باشید.