How to make width of <li> flexible?

Question

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/

Answer 1

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;
}

FIDDLE

Answer 2

You want the search input to have less width,but you write this in your css:

#navigation > #search input[type=text]:focus{width:150px;}

If you still want the width to increase when the input is focused, set the width smaller.

Demo

I add a border for the input.By the way,border:0;should be corrected as border:none;