Foros del Web » Creando para Internet » CSS »

Problema con menu desplegable vertical

Estas en el tema de Problema con menu desplegable vertical en el foro de CSS en Foros del Web. Tengo un problema con una adaptación al menu vertical suckerfish http://platea.cnice.mecd.es/~jmas/ma...ntalescss.html En el maligno (IE.x) se ve bien !! (increíble) pero a la hora de ...
  #1 (permalink)  
Antiguo 16/03/2006, 18:55
 
Fecha de Ingreso: febrero-2005
Mensajes: 135
Antigüedad: 12 años, 9 meses
Puntos: 0
Pregunta Problema con menu desplegable vertical

Tengo un problema con una adaptación al menu vertical suckerfish
http://platea.cnice.mecd.es/~jmas/ma...ntalescss.html

En el maligno (IE.x) se ve bien !! (increíble) pero a la hora de verlo en firefox, nada ! En Opera tampoco funciona.

http://idiweb.com.mx/sedil/

Doy las ligas del la CSS y el JS para los interesados
http://idiweb.com.mx/sedil/css/general.css
http://idiweb.com.mx/sedil/scripts/suckerfish.js

Y pego el código para facilitar.

Código:
if (window.attachEvent) window.attachEvent("onload", sfHover);*/
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;
if (window.attachEvent) window.attachEvent("onload", startList);
Código:
#menu{
	font-size:.7em;
	font-weight:bold;
	width:220px;
	float:left;
	height:auto;
	margin-bottom:0;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	background:#404e5f url(../img/fondo_menu.gif) repeat-y left top;
}
#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 220px; /* Width of Menu Items */
/*	border-bottom: 1px solid #ccc;*/
	background:#404e5f url(../img/fondo_menu.gif) repeat-y left top;
	}
#menu li{
	color:#ff9900;
	border-top:1px solid #596574;
	border-bottom:1px solid #303c4a;
}
#menu ul li {
	position: relative;
	}
	
#menu li ul {
	position: absolute;
	left: 220px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
#menu ul li a {
	padding: 1px;
	padding-left:25px;
	display:block;
	text-decoration:none;
	line-height:2em;
	height:2em;
	color:#ff9900;
	background: url(../img/vineta.gif) no-repeat 1em center;
}
#menu li ul li a{
	background:#404e5f url(../img/vineta.gif) no-repeat 1em center;
}
/* Fix IE. Hide from IE Mac \*/
* html #menu ul li { float: left; height: 1%; }
* html #menu ul li a { height: 1%; }
/* End */

#menu ul li a:hover {
	color:#fff;
	background:#596574 url(../img/vineta2.gif) no-repeat 1.3em center;
}
#menu li:hover ul, #menu li.over ul { display: block; } /* The magic */
Gracias y saludos.
  #2 (permalink)  
Antiguo 18/03/2006, 07:42
 
Fecha de Ingreso: junio-2004
Mensajes: 45
Antigüedad: 13 años, 5 meses
Puntos: 0
Cambia de Programa

Hola :
Te sugiero que te cambies de programa para generar menus, yo utilizo el DHTMLMenu de Sothink y se bien en todos los navegadores, mira, yo utilizo un menú en mi sitio(triple doble w punto muestrate punto cl), el que yo puse no tiene imágenes pero se las puedes colocar, además de muchos efectos.

Espero te sirva.
  #3 (permalink)  
Antiguo 19/03/2006, 15:02
 
Fecha de Ingreso: septiembre-2005
Mensajes: 63
Antigüedad: 12 años, 2 meses
Puntos: 1
Hola,

Yo tengo ese código en su estado original. y la principal diferencia que encuentro son las dos últimas lineas en el javascript. en el código que tengo funciona bien en opera y firefox, prueba eliminar la úñtima linea, y quita el comentario de la anterior. (Asi esta en el código original y funciona bien). Espero haber sido de ayuda con tu problema. Saludos.
__________________
Mientras mas aprendo, me doy cuenta que es más lo que ignoro.
  #4 (permalink)  
Antiguo 19/03/2006, 16:54
 
Fecha de Ingreso: febrero-2005
Mensajes: 129
Antigüedad: 12 años, 10 meses
Puntos: 2
Pues este post me viene al pelo, por que iva a abrir uno preguntando por el mismo codigo que habeis puesto. El caso es que yo lo tengo como dice xaguar con la penultima linea del javascript descomentada y sin la ultima linea, pero yo solo lo veo bien en Opera y Firefox, pero no en IExplorer.

El caso es que el ejemplo de la pagina web si que lo veo en IE, Mozilla y Opera, pero lo que tengo yo, siendo los dos iguales ( o al menos eso creo vamos )

Un saludo y gracias

Edito: Me acabo de dar cuenta de que tenia un pequeño fallo, habia borrado la linea que hacia referencia al *.js. Yo creo que en el codigo de arriva sobra la ultima linea y descomentar la penultima.
GRacias

Última edición por Pipeline; 19/03/2006 a las 16:59
  #5 (permalink)  
Antiguo 19/03/2006, 18:31
 
Fecha de Ingreso: septiembre-2005
Mensajes: 63
Antigüedad: 12 años, 2 meses
Puntos: 1
Hola de nuevo,
ya hice unas pruebas y el java script esta bien. no importa la lina comentada.
el problema es el css. y si lo vo veo bien en todos los navegadores que tengo instalados (5 en total). les pongo el código del CSS.

Código:
/* CSS Document */
body {
	font: normal 11px verdana;
	}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
	}

ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
		
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
li:hover ul, li.over ul { display: block; } /* The magic */
Chequenlo, si funciona.
__________________
Mientras mas aprendo, me doy cuenta que es más lo que ignoro.
  #6 (permalink)  
Antiguo 20/03/2006, 11:57
 
Fecha de Ingreso: febrero-2005
Mensajes: 135
Antigüedad: 12 años, 9 meses
Puntos: 0
Muchas gracias por sus comentarios, a todos !

Pero, el problema era algo de lo más simple. Estaba mal formado mi documento HTML !!!

Tenía mal anidadas las listas por ello no funcionaba en firefox (quien si hace caso de los estandares )

Consejo: SIEMPRE validar hojas de estilos y documentos HTML con las herramientas del w3c, luego preguntar en foros.

La forma de la lista que tenía era:
<ul>
<li>tema 1</li>
<ul>
<li>subtema 1.1</li>
<li>subtema 1.2</li>
</ul>
<li>tema 2</li>
<ul>
<li>subtema 2.1</li>
<li>subtema 2.2</li>
</ul>
</ul>

y debe de ser:
<ul>
<li>tema 1
<ul>
<li>subtema 1.1</li>
<li>subtema 1.2</li>
</ul>
</li>
<li>tema 2
<ul>
<li>subtema 2.1</li>
<li>subtema 2.2</li>
</ul>
</li>
</ul>

Pueden verlo corregido en la misma liga.
Saludos.
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 10:58.