I'm having a problem with my menu, in which there's search form. And when the input is on focus the elements of the menu have to be with less width, but I don't know how to make it work...
<nav role="navigation" class="holder">
<ul id="navigation">
<li><a href="#" id="home">Home</a><li>
<li><a href="#">Random Page</a><li>
<li><a href="#">Random Page</a><li>
<li><a href="#">Random Page</a><li>
<li><a href="#">Random Page</a><li>
<li><a href="#">Random Page</a><li>
<li><a href="#">Random Page</a><li>
<li id="search">
<form method="get" action="">
<input type="text" name="string">
<input type="submit" name="" value="Go">
<div class="c_l"></div>
</form>
<li>
</ul>
</nav>
Here is the code, in which you can see what exactly I'm trying to do: http://jsfiddle.net/YcLtw/
If you mean that your search box shift down when it doesn't have enough width to expand, then you can fix this by doing the following:
#navigation {
position: relative;
}
#search {
position: absolute;
right: 0;
}