Desplegar buscador

[Pcfan]

Hola Amigos de ForosWeb.
Lo que quiero lograr es lo siguiente:
1- Este es el tema:


Bueno lo que yo quiero es que al poner el mouse sobre la barra negra despliege un buscador, algo como en esta imagen:


Y al sacar el mouse de la barra desaparezca, pero que se pueda buscar al querer buscar, ahí esta el tema yo usaba onmouseover pero al querer ir al input a buscar se desaparece, entonces quiero arreglar eso :P

Puede desaparecer tanto al hacer click afuera de la barra o simplemente sacando de la barra.

El código es:

Código PHP:

  <div id="search_index"><div class="content"><div class="global-nav"> 
<form class="form-search js-search-form" accept-charset="ISO-8859-1" method="post" action="javascript:buscar_posts()"> 
<span class="search-icon js-search-action"> 
<i class="buscador nav-search"></i> 
</span><input id="input_bus" class="search-input" type="text" placeholder="Buscar" value="" name="buscar" onkeydown="buscar_posts(this.value);"> 
</form></div></div></div>  
   

Saludos

[Bam_Margera]

Esto lo puedes hacer perfectamente sin javascript (tendría sentido hacerlo con javascript si quisieras que fuera al clicar algo), simplemente con CSS

la verdad es que propones un html muy engorroso,

Te regalo este ejemplo: http://jsfiddle.net/fg2Lg/ (Si no entiendes algo, dimeló)

Si lo que querías son efectos, también los puedes conseguir con CSS

http://jsfiddle.net/fg2Lg/1/

(cambia opacidad por altura, por ejemplo)

[Pcfan]

Gracias por tu ayuda me sirvio, una pregunta en form es necesario ponerle form? O se puede cambiar el nombre?
SAludos