Foros del Web » Creando para Internet » CSS »

Menu multinivel no funciona en Opera

 Estas en el tema de Menu multinivel no funciona en Opera en el foro de CSS en Foros del Web. Hola a todo el foro: Estoy realizando un ejercicio de un menu multinivel, y llegado al punto de tener que ocultar los submenu utiliza la ...
  #1 (permalink)  
Antiguo 22/09/2006, 05:09
 
Fecha de Ingreso: septiembre-2006
Mensajes: 7
Antigüedad: 18 años, 2 meses
Puntos: 0
Menu multinivel no funciona en Opera
Hola a todo el foro:

Estoy realizando un ejercicio de un menu multinivel, y llegado al punto de tener que ocultar los submenu utiliza la propiedad oveflow sobre el li del enlace ocultandolo o haciendolo visible segun el hover sobre el li

Funciona bien tanto en FF como en IE7 pero no funciona en Opera 9.0 y 7.23 (en cada una de estas dos versiones se ve distinto) No comprendo por que ni por supuesto como se puede solucionar

Acudo a vuestra ayuda

Os pego el html y el css

Un saludo

HTML

<ul id="menu">
<li class="menuitem" id="m1"><a href="#">Enlace 1</a>
<ul>
<li><a href="#">enlace 1.1</a></li>
<li><a href="#">enlace 1.2</a></li>
<li><a href="#">enlace 1.3</a>
<ul>
<li><a href="#">enlace 1.3.1</a></li>
<li><a href="#">enlace 1.3.2 </a>
<ul>
<li><a href="#">enlace 1.3.2.1</a></li>
</ul>
</li>
<li><a href="#">enlace 1.3.3</a></li>
</ul>
</li>

<li><a href="#">enlace 1.4</a>
<ul>
<li><a href="#">enlace 1.4.1</a></li>
<li><a href="#">enlace 1.4.2</a></li>
<li><a href="#">enlace 1.4.3</a></li>
</ul>
</li>
</ul>
</li>

<li class="menuitem" id="m2"><a href="#">Enlace 2</a>
<ul>
<li><a href="#">enlace 2.1</a></li>
<li><a href="#">enlace 2.2</a></li>
<li><a href="#">enlace 2.3</a></li>
<li><a href="#">enlace 2.4</a></li>
</ul>
</li>

<li class="menuitem" id="m3"><a href="#">Enlace 3</a>
<ul>
<li><a href="#">enlace 3.1</a></li>
<li><a href="#">enlace 3.2</a>
<ul>
<li><a href="#">enlace 3.2.1</a></li>
<li><a href="#">enlace 3.2.2</a></li>
</ul>
</li>
<li><a href="#">enlace 3.3</a></li>
<li><a href="#">enlace 3.4</a></li>
</ul>
</li>

<li class="menuitem" id="m4"><a href="#">Enlace 4</a>
<ul>
<li><a href="#">enlace 4.1</a></li>
<li><a href="#">enlace 4.2</a></li>
<li><a href="#">enlace 4.3</a></li>
<li><a href="#">enlace 4.4</a></li>
</ul>
</li>

<li class="menuitem" id="m5"><a href="#">Enlace 5</a>
<ul>
<li><a href="#">enlace 5.1</a></li>
<li><a href="#">enlace 5.2</a></li>
<li><a href="#">enlace 5.3</a></li>
<li><a href="#">enlace 5.4</a></li>
</ul>
</li>

</ul>

CSS

#menu{
position:relative;
list-style-type:none;
}
#menu a{
font-family:Arial, Helvetica, sans-serif;
font-size:11pt;
display:block;
color:#336699;
text-align:center;
text-decoration:none;
padding:0.2em 0.5em;
}


#menu a:hover{
background-color: #4487C2;
color: #FFF;
}

.menuitem{
position:absolute;
margin:0;
padding:0;
width:10em;
height:26px;
overflow:hidden;
}


EL FALLO POSIBLEMENTE ESTE AQUI, PERO ¿POR QUE NO FUNCIONA EN OPERA?
.menuitem:hover{
overflow:visible;
}

.menuitem ul{
padding:0;
list-style-type:none;
}

#m1 { left: 0; }
#m2 { left: 9.95em; }
#m3 { left: 19.85em; }
#m4 { left: 29.80em; }
#m5 { left: 39.75em; }
  #2 (permalink)  
Antiguo 22/09/2006, 08:36
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 21 años, 2 meses
Puntos: 5
Por lo pronto tienes un error, te lo puse en negrita


Cita:
Iniciado por juan romero Ver Mensaje
EL FALLO POSIBLEMENTE ESTE AQUI, PERO ¿POR QUE NO FUNCIONA EN OPERA?
a.menuitem:hover{
overflow:visible;
}
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #3 (permalink)  
Antiguo 22/09/2006, 12:23
 
Fecha de Ingreso: septiembre-2006
Mensajes: 7
Antigüedad: 18 años, 2 meses
Puntos: 0
te refieres a a.(a punto) delante de menuitem.hover?

Si repasas el codigo veras que no esta puesto.

O te refieres a otra cosa?.No lo entiendo.
  #4 (permalink)  
Antiguo 22/09/2006, 13:08
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 21 años, 2 meses
Puntos: 5
Cita:
Iniciado por juan romero Ver Mensaje
te refieres a a.(a punto) delante de menuitem.hover?

Si repasas el codigo veras que no esta puesto.

O te refieres a otra cosa?.No lo entiendo.
a eso mismo me refiero, no esta puesto, el hover no va a funcionar, escribistes mal la sintaxis, me explico :D
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #5 (permalink)  
Antiguo 23/09/2006, 09:45
 
Fecha de Ingreso: septiembre-2006
Mensajes: 7
Antigüedad: 18 años, 2 meses
Puntos: 0
Desde luego debe haber un error de interpretacion, seguramente por mi parte, pero el selector a.menuitem:hover no señala a ningun elemento del DOM de esta pagina

Me lo podria explicar mejor?

Gracias
  #6 (permalink)  
Antiguo 24/09/2006, 00:08
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 19 años, 1 mes
Puntos: 4
tu menu tapoco funciona en ie 6..

te paso uno que hice a horita...


me tome la molesita de tabular tu codigo, no me gusta trabajar con codigos desordenados.
=)
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">

<head>
<title>Untitled</title>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
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>
<style type="text/css">
*{
	margin:0px;
	padding:0px;
	}

#menu a{
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
color:#336699;

height:17px;
text-align:center;
text-decoration:none;
padding:5px 10px;
background-color:#fff;
}

#menu a:hover{
background-color: #4487C2;
color: #FFF;
}

#menu{
list-style-type:none;
}
#menu li{
	position: relative;
	float: left;
	width:100px;
	}
#menu li ul{
	list-style-type:none;
	display:none;
	position:absolute;
	top:27px;
	left:0px;
	}
	#menu li:hover ul,#menu li.over ul{
		display:block;
		}

</style>
</head>

<body>
<ul id="menu">
	<li><a href="#1">Enlace 1</a>
 		<ul>
			<li><a href="#11">enlace 1.1</a></li>
			<li><a href="#12">enlace 1.2</a></li>
			<li><a href="#13">enlace 1.3</a>
				<ul>
					<li><a href="#">enlace 1.3.1</a></li>
					<li><a href="#">enlace 1.3.2 </a>
						<ul>
							<li><a href="#">enlace 1.3.2.1</a></li>
						</ul>
					</li>
					<li><a href="#">enlace 1.3.3</a></li>
				</ul> 
			</li>
				<li><a href="#14">enlace 1.4</a>
 				<ul>
					<li><a href="#141">enlace 1.4.1</a></li>
					<li><a href="#143">enlace 1.4.2</a></li>
					<li><a href="#143">enlace 1.4.3</a></li>
				</ul>  
			</li>
		</ul> 
	</li>

	<li><a href="#2">Enlace 2</a>
		<ul>
			<li><a href="#21">enlace 2.1</a></li>
			<li><a href="#22">enlace 2.2</a></li>
			<li><a href="#23">enlace 2.3</a></li>
			<li><a href="#24">enlace 2.4</a></li>
		</ul>
	</li>

	<li><a href="#3">Enlace 3</a>
		<ul>
			<li><a href="#31">enlace 3.1</a></li>
			<li><a href="#32">enlace 3.2</a>
 				<ul>
					<li><a href="#">enlace 3.2.1</a></li>
					<li><a href="#">enlace 3.2.2</a></li>
				</ul> 
			</li>
			<li><a href="#33">enlace 3.3</a></li>
			<li><a href="#34">enlace 3.4</a></li>
		</ul>
	</li>

	<li><a href="#4">Enlace 4</a>
		<ul>
			<li><a href="#41">enlace 4.1</a></li>
			<li><a href="#42">enlace 4.2</a></li>
			<li><a href="#43">enlace 4.3</a></li>
			<li><a href="#44">enlace 4.4</a></li>
		</ul> 
	</li>

	<li><a href="#5">Enlace 5</a>
 		<ul>
			<li><a href="#51">enlace 5.1</a></li>
			<li><a href="#52">enlace 5.2</a></li>
			<li><a href="#53">enlace 5.3</a></li>
			<li><a href="#54">enlace 5.4</a></li>
		</ul>
	</li>
</ul><br /><br />
<p>asdasda</p>
</body>
</html>
obiamente se usa js ya que li:hover no soporta ie6

nota: use la tenicna de Suckerfish Dropdowns
http://www.alistapart.com/articles/dropdowns
__________________
Saludos
FT.
www.fernando.com.mx
Última edición por fer10; 24/09/2006 a las 01:25 Razón: me falto el position:absolute;
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 20:27.