Expand search input on icon click issue

<script src="modernizr.custom.js"></script>

        <script src="js/classie.js"></script>
        <script src="js/uisearch.js"></script>
        <script>
            new UISearch( document.getElementById( 'sb-search' ) );
        </script>

<nav id="menu">
        <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="Products.php">Products</a></li>
            <li><a href="Services.php">Services</a></li>
            <li><a href="About.php">About</a></li>
            <li><a href="Contacts.php">Contacts</a></li>
            <li style="float:right; list-style:none"</li>
               <div id="sb-search" class="sb-search">
                <form>
                  <input class="sb-search-input" placeholder="Enter your search term..." type="text" value="" name="search" id="search">
                   <input class="sb-search-submit" type="submit" value="">
                   <span class="sb-icon-search"></span>
                </form>
              </div>
            </li>
         </ul>
    </nav>

#menu
{
    width:960px;
    height:auto;
    margin:0 auto 0 auto;
}

#menu ul
{
    list-style-type:none;
}

#menu ul li
{
    float:left;
    height:46px;
    line-height:46px;
    font-family:'bariol_regularregular';
    font-weight:300;

}

#menu ul li a
{
    text-decoration:none;
    color:#ccc;
    display:block;
    margin-right:5px;
    height:46px;
    line-height:46px;
    padding:0 5px 0 5px;
    font-size:20px;

}