css - 幅の作り方フレキシブル？

Question

検索フォームがあるメニューに問題があります。また、入力がフォーカスされている場合、メニューの要素の幅を狭くする必要がありますが、それを機能させる方法がわかりません...

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

私がやろうとしていることを正確に見ることができるコードは次のとおりです: http://jsfiddle.net/YcLtw/

Answer 1

検索入力の幅を狭くしたいのですが、CSS に次のように記述します。

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

入力がフォーカスされたときに幅を広げたい場合は、幅を小さく設定します。

デモ

入力用のボーダーを追加します。ちなみに、次のようにborder:0;修正する必要がありますborder:none;