No consigo hacer funcionar un menú desplegable

[GekoDH]

Hola de nuevo, antes de nada pido disculpas por mis constantes preguntas, pero es la forma de aprender.

Estoy teniendo problemas para desplegar un submenú al poner el puntero encima de una de las opciones del menú. Mi menú está hecho con "display: inline" en vez de con floats porque para mí es más intuitivo pero no encuentro ninguna solución, os dejo el código (hice #menu y #menu2 porque necesito que exista separación entre ellos:

Código:

<div id="navbar">
      <ul id="menu">
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Galer&iacute;a</a>
          <ul id="submenu">
             <li><a href="#">Opcion1</a></li>
             <li><a href="#">Opcion2</a></li>
          </ul> 
        </li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
      <ul id="menu2">
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
</div>

Código:

#navbar{
    text-align: right;
    background-color: #303030;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 13px;
}

#navbar ul{
  display: inline;
  padding: 0 13px 0 13px; /*Separación entre menu y menu2*/
}

#navbar ul ul{
    display: none; /*Para que no se vea el submenú sin hacer que aparezca*/
}

#navbar li{  /* Si esto no está inline, el inline de "#navbar ul" no funciona*/
    display: inline;
    padding: 0 8px 0 8px; /*Separación entre opciones*/
}

#navbar a{
    line-height: 40px; /*Altura del menu*/
    text-decoration: none;
    color: #919194;
    display: inline-block; /*Para que el enlace ocupe todo el alto del menú*/
}

#navbar a:hover{
    color: #D4D4D6;
}

Este es el resultado (el fondo ocupa todo el ancho de la pantalla):

Muchas gracias de antemano.