Float search bar over menu - html

Question

i have a theme based on bootstrap 2.2
Now i am customizing it.
When my menubar is scrolled to the top a menubar appears at the top.
When you click on the search bar it expands to a with of 200px ... and slides over the menu bar.
Now i want the same for the normal menubar. But when it gets to long it jumps under the menubar in stead of sliding over it.
How can i change that?
HTML code of the right search bar:
<div class="container">
<div class="row">
<div class="span12">
<nav>
<div id="megamenu">
</nav>
</div>
<div class="spy-left">
<div class="spy-right">
<div class="spyshop">
<div class="shoppingcart">
</div>
<div class="form-search-wrapper">
<form id="form-search-spy" class="form-search" method="get" action="http://h2374118.stratoserver.net/catalogsearch/result/">
<input class="search-query" type="text" name="q" placeholder="Zoeken...">
<button class="btn" onclick="document.getElementById('orm-search-spy').submit()" type="submit">
</form>
</div>
Here is the html code of the menubar which has to be changed:
<div class="container">
<div class="wrapper_w">
<div class="row">
<div class="span12">
<div class="menufront">
<div class="spy-left">
<nav>
<ul class="nav nav-list hidden-desktop">
<div id="megamenu">
<ul id="nav">
...
<div id="menufront" class="pull-right padding-1">
<div class="form-search-wrapper">
<form id="form-search-spy" class="form-search" method="get" action="http://h2374118.stratoserver.net/catalogsearch/result/">
<input class="search-query" type="text" name="q" placeholder="Zoeken...">
<button class="btn" onclick="document.getElementById('orm-search-spy').submit()" type="submit">
<i class="icon-search-2 icon-large"></i>
</button>
</form>
</div>
etc ...
Piece of the css:
#spy .form-search input.search-query:focus {
width: 200px !important;
}
#spy .form-search input.search-query {
border: 2px solid #fff;
border-radius: 4px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.27);
float: left;
font-size: 12px;
height: 24px;
padding-left: 44px;
transition: all 0.5s ease 0s;
width: 49px;
}
#menufront .form-search input.search-query:focus {
display: inline-block;
float: left !important;
visibility: visible !important;
width: 140px !important;
}
#menufront .form-search input.search-query {
width: 100px !important;
}
Who can help me?

Answer 1

Use absolute positioning; then use property values of top , right and z-index to get desired effect.
you-search-bar {
position: absolute;
right: 0; /* adjust as needed */
top: -25px; /* Adjust as needed to get the number that will keep it above the menu */
z-index: 999; /* Whatever number that keeps it above the menu */
}
Note: As mentioned by Shipow, the parent needs to have a position value of relative.

Answer 2

You'll need to set the float rule in the CSS for that element to:
float: clear
You may have to do some other positioning to get things to look correct after that, but it's difficult to be more specific with seeing the code in action.

Answer 3

You can move it via the position: relative in your css
#spy .form-search input.search-query:focus {
width: 200px !important;
position: relative;
top: 30px;
}