[SOLUCIONADO] 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.

[moginn]

si no te funciona este menu prueba con otros

http://www.dynamicdrive.com/dynamicindex1/
http://www.dynamicdrive.com/style/cs...y/category/C1/

[GekoDH]

Gracias, pero este lo estoy haciendo yo partiendo de cero, y ya que soy novato me gustaría aprender a construírlos más que a coger uno ya fabricado.

Saludos.

[siddartha23]

¿Qué te parece si empiezas posicionando el submenú donde corresponde?
Al item #galería que funciona como contenedor le das un position:relative para ubicar el #submenu con position:absolute; top:40px; left:0. Luego le das estilos para cuadrar bien los botones y transiciones para mejorar la UI.

[Zeromm]

Basicamente no te funciona porque no le estas diciendo en ningún momento que tiene que aparecer. Lo tienes oculto con display: none, pero, ¿en que parte del codigo le dices que aparezca?

Facil. Le añades una clase (o un id, a tu gusto) al <li> que tiene el submenú (en el ejemplo que pongo le puse de clase "galeria"), que en este caso es el de galería y al css le añades esto:

#navbar ul li.galeria:hover ul{display: block;}

Con eso le dices que al li que tiene la clase galeria, cuando pases el ratón por encima, muestre su <ul> A mayores yo le añadiría a ese <ul> un position: absolute para que no desmonte todo.

[mbm150]

Hola

Como te ha dicho algun compañero, tienes que poner display:block para que se vea el submenu.

http://jsfiddle.net/mbm150/sd2dx9vg/

Saludos.

[GekoDH]

Ok muchas gracias a todos por vuestras respuestas, me estaba volviendo loco jajaj.
También decidí hacerlo con floats en vez de inlines, ya que tiene sus ventajas y no es tan difícil como me parecía al principio.

Al final me quedó muy majo y hasta me permití el lujo de añadirle una animación con animate.css.

Gracias!