Menú horizontal desplegable con css [solucionado]

hq · 21/06/2007, 10:50

Muy buenas,

Estoy tratando de hacer un menú horizontal basado en CSS. El menú tiene varias partes:
- Menú principal.
- Algunas opciones con menú secundario.

La idea es que el menú principal tenga pestañitas y el secundario no. Además, tanto el uno como el otro me gustaría que fuesen horizontales, con el menú secundario saliendo justo debajo del principal.

Logros hasta el momento:

- Menú principal horizontal y con pestañitas (qué mono!!)
- Menú secundario sin pestañitas y justo debajo del principal.

Necesito:

- Qué el menú secundario salga también horizontal y llevo varios días sin conseguirlo

En fin aquí os dejo el código del Menú:

Código:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
  <title>Menu</title>
  <link rel="stylesheet" type="text/css" href="menu.css"  />

<script type="text/javascript">

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;


</script>

</head>

<body>
<div id="menu">
	<ul id="nav">
		[*]Inicio
		<li id="activo">Entrevistas
			<ul id="subm">
				[*]Grupos
				[*]Actores
				[*]Otros famosos
			[/list]		
		[*]Otros articulos
		[*]Firmas
			<ul id="subm">
				[*]Deivi
				[*]Tanuka
				[*]Mareliel
				[*]Claudia
				[*]Maryi
				[*]Jose Ma
			[/list]		
		[*]Ocio
			<ul id="subm">
				[*]Críticas de cine
				[*]Chiste del mes
			[/list]		
	[/list]</div>
</body>
</html>

Y ahora el de la hoja de estilos (CSS):

Código:

#menu {
	float: left;
	width: 100% ;
	text-align: center ;
	clear: both ;
	background: #DAE0D2 url("bg.gif") repeat-x bottom;
}
#menu ul {
	list-style: none;
 	display: inline;
	margin: 0;
	padding: 10px 10px 0;
}
#menu li {
	float: left;
	position: relative;
	color: #40A035;
	padding:0 0 0 9px;
	margin: 0;
	background: url("left.gif") no-repeat left top;
	display: block;
}
#menu #activo {
	color: #EDFBEB;
	background-image: url("left_on.gif");
}
#menu #activo a {
	background-image: url("right_on.gif");
	padding-bottom: 5px;
}
#menu #activo li, #menu #activo li a, #menu #subm li, #menu #subm li a {
	background: #DAE0D2 url("bg.gif") repeat-x bottom;
}
#menu li ul {
/* se ocultan los submenus */
	display: block;
	visibility: hidden;
	position: absolute;
	width: auto;
	top: 1.25em;
	left: 0;
}
#menu ul li > #menu ul {
	top: auto;
	left: auto;
}
#menu ul li:hover ul, #menu ul li.over ul { 
	visibility: visible;
}
/* se hacen visibles los submenus */
#menu #activo ul, #menu li:hover ul {
	visibility: visible;
}
/* por defecto se ve el submenu que dependa de la opcion activa */
#menu #activo ul {
	z-index: 10;
}
/* el z-index del hover es mayor para poder ver el submenú de otras opciones */
#menu li:hover ul {
	z-index: 100;
}
#menu ul li a {
	float: left;
	display: block;
	text-decoration: none;
	color: #40A035;
	background: url("right.gif") no-repeat right top;
/* el padding para la izquierda es también de 15 (como la dere), pero al haber puesto 9 en el elemento "li" hay que descontarlo aquí */
	padding: 5px 15px 4px 6px;
	font-weight: bold;
}
#menu a:hover {
	color: #B73CBB;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
* #menu a { float: none ; }
/* End */

A ver si alguien me puede ayudar un poquito

:D

hq · 21/06/2007, 13:45

Bueno, la solución al final no era para tanto, pero no sabéis lo que me ha costado encontrarla.

El caso es que sobraba la propiedad

Código:

position:relative

incluida en "#menu li".

Por si a alguien le surge la necesidad os diré que la base de este tipo de menús es configurar las listas con el siguiente código:

Código:

li { float: left ; margin-right: 4px ;}
li ul { display: block ;
	visibility: hidden;
	position: absolute ;
	left: 9px; }
li:hover ul { visibility: visible;}

con las soluciones normales de los diferentes "bugs" (es decir, el scrip para IE y código de CSS para los usuarios de Mac con IE) para que se vea bien en todos los navegadores y referidos a las etiquetas correspondientes para que no todas las listas sean así.

En definitiva, que basándonos en el código anterior podemos hacer menús muy aparentes. (A mi ahora sólo me queda terminar de hacerlo bonito)

**jorgens** · 21/06/2007, 13:54

Como mola, gracias.

Imagino que me dejarás que lo coloque de lección en la web, no? A tu salud, claro!

hq · 25/06/2007, 13:47

Claro, cómo no!!!

**Gonzah** · 19/07/2008, 05:29

Claro, como Bien dijo. Nomás tendrias que agregar lo siguiente:

Código:

... ; background-repeat: no-repeat

Era muy Fácil y aparece en el Curso paso a paso escrito por el Administrador ;)

¡Saludos!.

**Lidia19** · 05/06/2009, 11:16

Hola,oye aver si puedes poner el codigo final de este menu horizontal que es bastante bueno,pero copiandome ese codigo sale el otro menu debajo totalmente pegado :? Gracias

**Pabl1to** · 08/10/2009, 14:57

Yo tengo una duda, quiero que en mi menu desplegable en lugar de ser con letras sea con imagenes, como lo hago??

**viviviv** · 03/01/2010, 19:21

Supongo, desde la total inesperiencia, que sera poniendo una imagen, en vede el texto.

**pipol1976** · 22/03/2011, 19:17

hq buenas amigo quiero que me hagas un favor me puedes explicar como subistes esas capturas para que se deslizen asi para colocarlas ene l foro yo solo puedo colocar las capturas pero congeladas me gustan asi como la tienes desplegables espero q me enseñes gracias