Foros del Web » Creando para Internet » CSS »

No se aguantan los menus desplegables

Estas en el tema de No se aguantan los menus desplegables en el foro de CSS en Foros del Web. Buenos días, Mikimoro colgó en las FAQ's, como hacer un menú emergente, justo era lo que yo buscaba y lo utilicé. Me funcionaba bien, pero ...
  #1 (permalink)  
Antiguo 15/12/2009, 03:04
 
Fecha de Ingreso: mayo-2009
Mensajes: 59
Antigüedad: 8 años, 7 meses
Puntos: 1
No se aguantan los menus desplegables

Buenos días,
Mikimoro colgó en las FAQ's, como hacer un menú emergente, justo era lo que yo buscaba y lo utilicé. Me funcionaba bien, pero algo debo haber hecho mal porque no se me aguantan los menús desplegables.
¿A que puede ser debido?
  #2 (permalink)  
Antiguo 15/12/2009, 03:55
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: No se aguantan los menus desplegables

disculpa, porque nadie espera este tipo de respuesta. no se puede saber a que esta debido sin ver el codigo. en serio, los problemas en css no son tan obvios debido a que un elemento puede estar afectado por multiples propiedades, ya sea directa o indirectamente.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 15/12/2009, 04:00
 
Fecha de Ingreso: mayo-2009
Mensajes: 59
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: No se aguantan los menus desplegables

Si, es cierto, perdon, soy novata. Aquí esté el texto en html y luego inserto el CSS.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>
<title>AEC CATALUNYA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="club cicloturista catalunya" />
<meta name="Description" content="Pagina dedicada als aficionats al cicloturisme" />
<meta name="Author" content="mims" />
<meta name="Robots" content="index, follow" />
<link rel="alternate" href="http://www.index.html" title="AEC Catalunya" media="all" />
<link rel="stylesheet" href="aec_estils_horitzontal.css" type="text/css" />
<!--[if IE]><style>#menu ul li ul li a{margin-bottom:-1px;border-top-color:transparent;} #menu ul.nivel2{margin-top: -1px;}</style><![endif]-->
<!--[if IE 7]><style>#menu ul li ul li.nivel2:hover{margin-bottom:-2px;}</style><![endif]-->


</head>
<body>

<div id="imglogo">
<img src="LOGO CAT.gif"/>
</div>
<div id="imgcapçalera">
<img src="capçalera.gif"/>
</div>

<div id="menu">
<ul>
<li class="nivel1"><a href="#" class="nivel1">El Club</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Actualitat</a></li>
<li><a href="#">Junta directiva</a></li>
<li><a href="#">Història</a></li>
<li><a href="#">Museu</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Cicloturisme</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Llicències federatives</a></li>
<li><a href="#">Marxes F.C.C.</a></li>
<li><a href="#">Brevets</a></li>
<li><a href="#">Altres rutes</a></li>
<li><a href="#">Gal·leria</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Catalunya a peu</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Caminades</a></li>
<li><a href="#">Excursions</a></li>
<li><a href="#">Gal·leria</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Documents</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Contacta'ns</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Links</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Blog</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Forum</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<br></br>

<div id="rellotge">
<!-- Codigo Relojes Gratis www.creatupropiaweb.com -->
<embed src="http://www.creatupropiaweb.com/recursos/relojes/coleccion_relojes-flash/clock152.swf"
width="150" height="154"
></embed>><!---- Final Código Reloj Flash www.Crea tu Propia Web.com ---->
</div>


<div id="capa1">
<div />
<div id="txt">
<script languaje="JavaScript">
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Diumenge","Dilluns","Dimarts","Dimecres","D ijous","Divendres","Dissabte")
var montharray=new Array("1","2","3","4","5","6","7","8","9","10","11 ","12")
document.write("<small><font color='white' face='Arial'>"+dayarray[day]+" "+daym+" / "+montharray[month]+" / "+year+"</font></small>")
</script>
</div>
</div>

<div id="facebook">
<a href="http://www.facebook.com/group.php?gid=72049838533"> <img src="facebook.jpg" border=0/>
</div>
<br></br>
<div id="meteocat">
<a href="http://www.meteo.cat"><img src="meteocat.jpg" border=0/>
</div>
<br></br>
<div id="peupag">
<a href="dadeslegals.html">dades legals | <a href="http://www.blancotopografia.com">mims dw
</div>

</body>
</html>

CSS

* {margin-left: 1px;
padding: 0px; outline: 0;
}
#txt {font-family:arial; color: white; margin-left:-165px;margin-top:100px}
#imglogo {position: relative; margin-left:-50;text-align: left;margin-top: 0px ;}
#imgcapçalera {position: relative; margin-left:189px;text-align: left;margin-top: -160px ;}
#facebook {margin-top:20px; margin-left:-155px}
#meteocat {margin-top:-10px; margin-left:-155px}
#peupag {font-family:arial; font-size:0.7em; color:gray; margin-left:-160px; }
#capa1
{position:absolute; left:190px; background-color:transparent; width:798px;height:325px;top:220px;
font-family:Arial; font-size:14px; border:red; border-width:2px; border-style:double;
}

#rellotge{position:relative; left:10px; top:-45px;}


html, body {width: 100%;
}
body {background: black;
font-family: Arial;
}

#menu {text-align: center;
font-size: 0.7em;
width: 810px; float: left; padding-left:16.5em; margin-top:-10px}

#menu ul {list-style-type: none;}

#menu ul li {width: 110px; }

#menu ul li.nivel1 { float: left;
margin-right: -12px; }

#menu ul li a {display: block;
text-decoration: none;
color: red;
background-color: black;
border: solid 1px red;
padding: 10px;
position: relative; }

#menu ul li a.nivel2, #menu ul li a.nivel2ie {color: red; }

#menu ul li a.nivel1, #menu ul li a.nivel2 {display: block!important;display: none;
position: relative; }
#menu ul li:hover {position: relative; }
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: yellow;
color: black;
position: relative; }

#menu ul li a:hover, #menu ul li:hover a.nivel2 {background-color: red;
color: black;
position: relative; }

#menu ul li ul {display: none; }

#menu ul li:hover ul.nivel2,
#menu ul li a:hover ul.nivel2{display: block;
position: absolute;left: 0px; }

#menu ul li ul li a {width: 160px;
padding: 8px 0px;
border-top-color: red; }

#menu ul li ul li a:hover {border-top-color: red;
position: relative; }

#menu ul li ul li ul li a.primera {border-top-color: red; }

table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative; }
  #4 (permalink)  
Antiguo 15/12/2009, 04:26
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: No se aguantan los menus desplegables

cuando dices "no se me aguantan los menús desplegables", ¿a que exactamente te refieres? en firefox el menu me funciona bien. en iexplorer8 tengo un poco de problema, el menu no se muestra, la capa #imgcapçalera esta afectandolo. pero de nuevo, ¿a que te refieres con lo antes citado?
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #5 (permalink)  
Antiguo 15/12/2009, 04:29
 
Fecha de Ingreso: mayo-2009
Mensajes: 59
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: No se aguantan los menus desplegables

Primero de todo, gracias por contestar.
Segundo, a lo que me refiero, es que yo me pongo con el cursor encima del menú y se me desplega bien el submenu, pero cuando quiero ponerme encima de uno de los submenus no me deja, me desaparece el submenu.
Espero haberme explicado bien.
  #6 (permalink)  
Antiguo 15/12/2009, 04:51
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: No se aguantan los menus desplegables

ya puedo ver lo que percibes. te sucede porque hay un elemento que se esta posicionando sobre el menu. especificamente el elemento que contiene el reloj. fijate que el elemento tiene propiedad display:relative;. como resultado, el elemento adquiere un nivel de z-index diferente a los elementos que no tienen position. si lo que quieres es ubicar el elemento en el lado derecho, asignale un position absolute con ancho y alto. asi evitas que el elemento quede sobre otros. hay mas formas de hacerlo, pero esa es la forma mas rapida.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #7 (permalink)  
Antiguo 15/12/2009, 05:11
 
Fecha de Ingreso: mayo-2009
Mensajes: 59
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: No se aguantan los menus desplegables

Cita:
Iniciado por zerokilled Ver Mensaje
ya puedo ver lo que percibes. te sucede porque hay un elemento que se esta posicionando sobre el menu. especificamente el elemento que contiene el reloj. fijate que el elemento tiene propiedad display:relative;. como resultado, el elemento adquiere un nivel de z-index diferente a los elementos que no tienen position. si lo que quieres es ubicar el elemento en el lado derecho, asignale un position absolute con ancho y alto. asi evitas que el elemento quede sobre otros. hay mas formas de hacerlo, pero esa es la forma mas rapida.
Muchas gracias. He resuelto el tema parcialmente. He quitado los relatives y he puesto absolute, no solo en el reloj, sino también en las imagenes, etc.
Pero fundamentalmente, el problema creo que radica en el bloque donde está el recuadro rojo, porque es una vez el menu se desplega ahí cuando no me mantiene el submenú si quiero ir a por él. ¿me explico?
  #8 (permalink)  
Antiguo 08/01/2010, 04:28
 
Fecha de Ingreso: mayo-2009
Mensajes: 59
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: No se aguantan los menus desplegables

Holas! Hasta el día de hoy no he logrado dar con la solución de mi problema. Finalmente lo he solucionando, conviertiendo cada bloque en una capa con el código z-index, deduciendolo del comentario de zerokilled. Gracias
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 16:42.