Cree un navbar con un dropdown, y dentro del mismo en el 'div, dropdown-menu' en lugar de colocar solo dropdown-items cree una 'card' y coloque el contenido en el card-body, me gusto el resultado pero el problema es que no entiendo porque el meno del dropdown esta siempre activado, no sube ni baja sino que siempre se esta mostrando, y esto tambien causa que los elementos del navbar se desplacen, aqui el codigo ( el dropdown de la pregunta esta en: li class="nav-item dropdown" ):
<nav class="navbar navbar-expand-xl navbar-light" style="background-color: #fff;" id="navbarid">
<div class="container d-flex">
<a class="navbar-brand d-xl-none" href="#">
Shopping.
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">Home</a>
<div class="dropdownmenu">
<div class="card">
<div class="card-body">
<ul class="list-styled">
<li class="list-styled-item dropdown-item"><a class="list-styled-link" href="#">default</a></li>
<li class="list-styled-item dropdown-item"><a class="list-styled-link" href="#">default</a></li>
<li class="list-styled-item dropdown-item"><a class="list-styled-link" href="#">default</a></li>
<li class="list-styled-item dropdown-item"><a class="list-styled-link" href="#">default</a></li>
<li class="list-styled-item dropdown-item"><a class="list-styled-link" href="#">default</a></li>
<li class="list-styled-item dropdown-item"><a class="list-styled-link" href="#">default</a></li>
<li class="list-styled-item dropdown-item"><a class="list-styled-link" href="#">default</a></li>
<li class="list-styled-item dropdown-item"><a class="list-styled-link" href="#">default</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Catalog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Docs</a>
</li>
</ul>
<a class="navbar-brand d-none d-xl-block mx-auto" href="#">
Shopping.
</a>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="#" class="nav-link text-body dropdown-toggle" dropdown-toggle="dropdown">United States</a>
<div class="dropdownmenu">
<div class="card">
<div class="card-body">
<ul class="list-styled">
<li class="list-styled-item dropdown-item"><a class="list-styled-link" href="#">United States</a></li>
<li class="list-styled-item dropdown-item"><a class="list-styled-link" href="#">Latin America</a></li>
<li class="list-styled-item dropdown-item"><a class="list-styled-link" href="#">Asia</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">USD</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">EN</a>
</li>
</ul>
...