error al crear menu desplegable+muestra vertical y no horizontal

[-thor-]

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

Código 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> 
   

CSS

Código 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;} 
   

jquery

Código PHP:

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