Search code examples
csslistmenuunordered

How to make width of <li> flexible?


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/


Solution

  • 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