Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] No consigo hacer funcionar un menú desplegable

Estas en el tema de No consigo hacer funcionar un menú desplegable en el foro de CSS en Foros del Web. 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ú ...
  #1 (permalink)  
Antiguo 27/12/2014, 12:06
Avatar de GekoDH  
Fecha de Ingreso: diciembre-2014
Ubicación: Ourense
Mensajes: 58
Antigüedad: 9 años, 2 meses
Puntos: 0
Pregunta No consigo hacer funcionar un menú desplegable

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.

Última edición por GekoDH; 27/12/2014 a las 12:13
  #2 (permalink)  
Antiguo 27/12/2014, 17:14
(Desactivado)
 
Fecha de Ingreso: enero-2013
Mensajes: 289
Antigüedad: 11 años, 1 mes
Puntos: 10
Respuesta: No consigo hacer funcionar un menú desplegable

si no te funciona este menu prueba con otros

http://www.dynamicdrive.com/dynamicindex1/
http://www.dynamicdrive.com/style/cs...y/category/C1/
  #3 (permalink)  
Antiguo 27/12/2014, 20:48
Avatar de GekoDH  
Fecha de Ingreso: diciembre-2014
Ubicación: Ourense
Mensajes: 58
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: No consigo hacer funcionar un menú desplegable

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.
  #4 (permalink)  
Antiguo 27/12/2014, 22:23
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 10 años, 5 meses
Puntos: 39
Respuesta: No consigo hacer funcionar un menú desplegable

¿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.
__________________
velarde23.com - Soluciones Web
  #5 (permalink)  
Antiguo 28/12/2014, 10:40
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 13 años, 7 meses
Puntos: 60
Respuesta: No consigo hacer funcionar un menú desplegable

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.
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.
  #6 (permalink)  
Antiguo 28/12/2014, 11:17
Avatar de mbm150  
Fecha de Ingreso: enero-2013
Ubicación: Muskiz
Mensajes: 79
Antigüedad: 11 años, 2 meses
Puntos: 21
Respuesta: No consigo hacer funcionar un menú desplegable

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.
  #7 (permalink)  
Antiguo 28/12/2014, 12:08
Avatar de GekoDH  
Fecha de Ingreso: diciembre-2014
Ubicación: Ourense
Mensajes: 58
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: No consigo hacer funcionar un menú desplegable

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!

Etiquetas: background, color, desplegable, funcionar, hover
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:48.