Having trouble designing a form with a dropdown menu that displays previous user searches when focused. Struggling to style the HTML/CSS so that the suggestions appear directly under the input box without any spacing.
If you want to see the issues I'm facing, check out this JSFiddle attempt where the suggestions wrap after the navbar.
body {
margin: 10px;
}
.navbar-container {
display: flex;
align-items: center;
}
.d-flex {
display: flex;
align-items: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse bg-inverse">
<div class="container navbar-container">
<a class="navbar-brand" href="#">
<img src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
</a>
<form class="form-inline d-flex">
<input class="form-control form-control-sm" type="text" placeholder="Search" id="menu1" data-toggle="dropdown">
<button class="btn btn-outline-success btn-sm" type="submit">Go</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
<div class="dropdown-divider"></div>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
<div class="dropdown-divider"></div>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
</ul>
</form>
</div>
</nav>