Problema con inline-block

rafael_lynch · #1 (**permalink**) 07/04/2013, 19:02

Hola, estoy intentando hacer un menu desplegable, es un ejemplo de la pagina web de un colegio.

Este es el codigo HTML por ahora:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Instituto Iberia</title>
<link rel="stylesheet" type="text/css" href= "estilo.css" />
</head>

<body>

<div id="menu-wrapper">
	<ul id="hmenu">
    	<li><a href="#">Inicio</a></li>
        <li><a href="#">Personal</a>
        	<ul id="sub-menu">
            	<li><a href="#">Idiomas</a></li>
                <li><a href="#">Matematicas</a></li>
                <li><a href="#">Ciencias</a></li>
                <li><a href="#">Artes</a></li>
                <li><a href="#">Educacion Fisica</a></li>
            </ul>
        </li>
        <li><a href="#">Instalaciones</a>
        	<ul id="sub-menu">
            	<li><a href="#">Aulas</a></li>
                <li><a href="#">Direccion</a></li>
                <li><a href="#">Biblioteca</a></li>
                <li><a href="#">Area recreativa</a></li>
            </ul>
        </li>
        <li><a href="#">Contacto</a></li>   
        <li><a href="#">Actividades</a></li> 
    </ul>
</div>                       
</body>
</html>

Y el CSS por ahora va asi

Código:

@charset "utf-8";
/* CSS Document */

body{margin:0;
	font-family: sans-serif;
	font-size:14px;
}

#menu-wrapper ul{padding:0;
	list-style:none;
}

#hmenu > li{
	display: inline-block;
}

Pero el texto se muestra asi :

Código:

Inicio

Personal Idiomas

Matematicas

Ciencias

Artes

Educacion Fisica





Instalaciones Aulas

Direccion

Biblioteca

Area recreativa





Contacto

Actividades

Cuando se supone tiene que aparecer una encima de otra. Ayuda porfavor.

C2am · #2 (**permalink**) 07/04/2013, 19:23

Hola
Fijate en www.araudi.net tienes varios ejemplos de menu desplegables.
Mira el código y trata de entender como funciona.

Ahora, explicate mejor, ya que te falta mucho código para que logres lo que quieres. Bah, no mucho pero sí falta.
http://jsfiddle.net/c2am/h5xdS/embedded/result/

rafael_lynch · #3 (**permalink**) 07/04/2013, 19:30

Muchas gracias por tu rapida respuesta, checare los menu's que me has recomendado. Gracias