Bootstrap: Make expanded input field overlap menu-items - css

Question

I've added an expanding input field in my Bootstrap .navbar, that only shows once the search button has been clicked. Right now the expanded input field pushes the menu-items to the left. When positioning #search-form absolute, the input field breaks out of on the right side of the container.
How can I make the search-form overlap the menu-times to the left?
Example:
$(function() {
$("#search-button, #search-icon").click(function(e) {
e.preventDefault();
$("#search-button, #search-form").toggle();
});
});
#search-form {
display: none;
max-width: 300px;
}
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<nav class="navbar navbar-default">
<div class="navbar-inner">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
This
</li>
<li>
and
</li>
<li>
That
</li>
<li>
<a id="search-button" class="btn btn-link"><i class="glyphicon glyphicon-search"></i></a>
</li>
<li>
<div id="search-form" class="form-group has-feedback">
<div class="input-group">
<label class="control-label sr-only" for="search"></label>
<input type="text" class="form-control" id="search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
Edit:
Added screenshot

Answer 1

This did the job:
.nav>li:last-child {
position: absolute;
right: 15px;
}