Ver Mensaje Individual
  #3 (permalink)  
Antiguo 15/12/2009, 04:00
mims
 
Fecha de Ingreso: mayo-2009
Mensajes: 59
Antigüedad: 14 años, 11 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; }