Styling a search box inside a header with CSS - html

Question

I am trying to style a search box inside a header using CSS. Here is a picture of my problem to help try and make things clearer:
When the search box is visible:
So my main problem is when the search box is faded in using JQuery it is taken out of document flow because I am using position: absolute; on .topSearchBarResultWrapper to get the search box where I want it on the header. I have tried using position: relative; which does bring the element .topSearchBarResultWrapper back into flow but does not display the search results below the header.
Thus, when I use position relative I did try and use top: 80px; to bring the search box wrapper down and then use margin-top: -100px; to get rid of the extra white space above, but then when you add search results to the wrapper the top: 80px; is invalid and does not work anymore because the size of .topSearchBarResultWrapper has changed.
I have also made a JsFiddle to help as well: https://jsfiddle.net/jjzp07ey/
Here is my HTML code that I am using:
<header> <!-- HTML 5 header -->
<ul class="navigationBarButtons">
<li>
<a class="topSearchBarButton defaultBlueButton navLoginButton"><img src="images/icons/searchIcon.png"></a>
<div class="topSearchBarResultWrapper">
<input type="text" class="topSearchBarInput" name="topSearchBox" placeholder="Search for someone...">
<div class="topSearchBarResult">d</div>
<div class="topSearchBarResult">d</div>
<div class="topSearchBarResult">d</div>
<div class="topSearchBarResult">d</div>
<div class="topSearchBarResult">d</div>
<div class="topSearchBarResult">d</div>
<div class="topSearchBarResult">d</div>
<div class="topSearchBarResult">d</div>
<div class="topSearchBarResult">d</div>
<div class="topSearchBarResult">d</div>
<div class="topSearchBarResult">d</div>
</div>
</li>
<li> <a class="defaultBlueButton" href="profileranks.php">Profile Ranks</a> </li>
<li> <a class="defaultBlueButton" href="howitworks.php">How it Works</a> </li>
</ul>
</header>
And here is the CSS code that I am using:
.topSearchBarInput
{
height: 32px;
width: 300px;
vertical-align: middle;
border: none;
border-radius: 4px;
display: inline-block;
margin-bottom: 4px;
}
.topSearchBarButton img
{
height: 24px;
width: 24px;
display: inline-block;
margin: 0 auto;
vertical-align: middle;
}
.topSearchBarResultWrapper
{
display: inline-block;
height: auto;
background-color: #dad9d5;
border-radius: 4px;
padding-bottom: 5px;
position: absolute;
}
.topSearchBarResult
{
background-color: red;
width: 300px;
height: auto;
}
header
{
background-color: black;
}
header ul
{
height: auto;
padding: 15px 0px;
margin: 0px;
}
header li
{
display: inline;
}
.defaultBlueButton /* Default Button Style */
{
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9); /* Used to support many different browsers */
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
border: 0px;
}
.defaultBlueButton:hover
{
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); /* Used to support many different browsers */
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
border: 0px;
cursor: pointer;
}