How to make navbar not bend down along with ajax auto complete

Quiz app, laravel 5.2, boostrap 3.3.6, jquery I am making a auto complete form with ajax but have run into a few problems, the auto complete is making my bootstrap navbar navbar push down along with it I tried to do

my Navbar

<div id="wrapper">
   <div id="banner-wrapper">
        <nav id="custom-bootstrap-menu" class="navbar navbar-default navbar-static-top">
            <div class="container-fluid">
    ...
    <form class="navbar-form navbar-left"  id="searchForm" method="post" action="{{route('quiz.search')}}">
                        {{ csrf_field() }}
                       <div class="form-group">
                         <input type="text" id="query" class="form-control" name="query" placeholder="Search">
                         <ul id="results" hidden>

                         </ul>
                       </div>
                       <button id="searchSubmit" type="submit" class="btn btn-default">Submit</button>
                    </form>
            ...
            </div>
        </nav> {{-- end of navbar --}}
        @yield('caraousel')
    </div>
</div>


and my ajax 

    $('#query').on('keyup', function() {

         if (this.value.length > 1) {
              $.ajax({
                  type:"POST",
                  url:"quiz/search",
                  data:$("#searchForm").serialize(),
                  success:function(data){
                      console.log(data);

                      $('#results').removeAttr('hidden');

                      for(var key in data){

              $("#results").prepend("<li><a href='{{route('quiz.show',['id' =>" + data[key].id + " ])}}' >" + data[key].title + "</a></li>");
                      }
                  }
              });
         }
    });

I'm not sure what is the simplest solution of css or JS I would need to apply, I tried to do

#results{
    z-index:1;
}

before http://imgur.com/a/BA3Vc after http://imgur.com/KPFcToX