No se aguantan los menus desplegables

mims · #1 (**permalink**) 15/12/2009, 03:04

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?

zerokilled · #2 (**permalink**) 15/12/2009, 03:55

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.

mims · #3 (**permalink**) 15/12/2009, 04:00

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" />



</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>

<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>

</li>
<li class="nivel1"><a href="#" class="nivel1">Cicloturisme</a>

<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>

</li>
<li class="nivel1"><a href="#" class="nivel1">Catalunya a peu</a>

<ul class="nivel2">
<li><a href="#">Caminades</a></li>
<li><a href="#">Excursions</a></li>
<li><a href="#">Gal·leria</a></li>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Documents</a>



</li>


</li>
<li class="nivel1"><a href="#" class="nivel1">Contacta'ns</a>


</li>
<li class="nivel1"><a href="#" class="nivel1">Links</a>


</li>
<li class="nivel1"><a href="#" class="nivel1">Blog</a>


</li>
<li class="nivel1"><a href="#" class="nivel1">Forum</a>


</li>
</ul>
</div>
<br></br>

<div id="rellotge">

<embed src="http://www.creatupropiaweb.com/recursos/relojes/coleccion_relojes-flash/clock152.swf"
width="150" height="154"
></embed>>
</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; }

zerokilled · #4 (**permalink**) 15/12/2009, 04:26

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?

mims · #5 (**permalink**) 15/12/2009, 04:29

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.

zerokilled · #6 (**permalink**) 15/12/2009, 04:51

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.

mims · #7 (**permalink**) 15/12/2009, 05:11

Cita:

Iniciado por zerokilled

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?

mims · #8 (**permalink**) 08/01/2010, 04:28

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