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"}); 
      } 
   );