JavaScript - error con menu desplegable

tengo un menu desplegable horizontal, pero los sub menu me los muestra en forma vertical y yo quiero que se visualizen horizontal tambièn.

El menu de nombre inicio y nombre ejemplo los muestra en forma correcta horizontal, pero si coloco el mouse sobre inicio me muestra el submenu en forma vertical y no hacia abajo

¿como podria arreglar ese problema?
gracias

html
[PHP]
<div class="menu">
<ul>

<li><a href="#">Inicio</a>
<ul>
<li><a href="#">¿Qué es jQuery?</a></li>
<li><a href="#">¿Por qué debería usarlo?</a></li>
<li><a href="#">¿Por qué tengo que seguir poniendo elementos de lista?</a></li>
</ul>
</li>

<li><a href="#">Ejemplos</a>
<ul>
<li><a href="#">Menú desplegable</a></li>
<li><a href="#">Fade-in, fade-out</a></li>
</ul>
</li>

</ul>

</div>
[/PHP]


CSS
[PHP]
ul li ul {
/* Resto de estilos... */
display: none;
}


.menu ul{ margin: 0; padding: 0; float: left;}


.menu ul li{ display: inline;}

.menuul li a
{ float: left; text-decoration: none;
color: white;
padding: 10.5px 11px;
background-color: #333; }

.menuul li a:visited{ color: white;}

.menu ul li a:hover, .menu ul li .current{ color: #fff; background-color:#0b75b2;}[/PHP]


jquery
[PHP]
$('ul li:has(ul)').hover(
function(e)
{
$(this).find('ul').css({display: "block"});
},
function(e)
{
$(this).find('ul').css({display: "none"});
}
);
[/PHP]