Tengo un problema, resulta que intento poner un link al inicio en la cabecera, pero se desactiva al solaparse con el menú lateral.
En realidad no se solapa pero al entrar en la misma franja horizontal que el menú, del link de la cabecera deja de funcionar.
Ya he probado con las posiciones (absolute, static etc) junto con las capas (z-index) pero sin resultado.
Pongo una imagen para que quede mas claro, como veis, la cabecera "Yellostone..." al estar en la misma franja que el menú, se desactiva su link...
El CCS
p, ul, li, div, nav
{
padding:0;
margin:0;
}
body
{
font-family:fantasy;
}
#menu {
overflow:auto;
position:relative;
z-index:2;
margin-left:0px;
margin-top:-272px;
}
.parent-menu {
background-color: #0c8fff;
min-width:180px;
float:left;
}
#menu ul
{
list-style-type:none;
}
#menu ul li a
{
padding:13px 11px;
display:block;
color:#fff;
text-decoration:none;
text-align:left;
}
#menu ul li a:hover
{
background-color:#007ee9;
}
#menu ul li:hover > ul {
left: 180px;
-webkit-transition: left 300ms ease-in;
-moz-transition: left 300ms ease-in;
-ms-transition: left 300ms ease-in;
transition: left 300ms ease-in;
}
#menu ul li > ul {
position: absolute;
background-color: #333;
top: 0;
left: -180px;
min-width: 180px;
z-index: -1;
height: 100%;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in;
}
#menu ul li > ul li a:hover
{
background-color:#2e2e2e;
}
p { color: black;
font-size: 1em;
margin-left: 10px;
margin-right: 1000px;
font-family: "Times New Roman" }
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
html, body {
margin: 0;
background-image:url(../images/fondo.jpg);
}
section #services {
text-align: center;
transform: translatez(0);
}
section #services li {
width: 120px;
height: 140px;
display: inline-block;
margin: 20px;
list-style: none;
}
section #services li div {
width: 120px;
height: 120px;
color:#6E6E6E;
font-size: 3.4em;
text-align: center;
line-height: 120px;
background-color: #2EFEF7;
transition: all 0.5s ease;
cursor:pointer;
}
section #services li div:hover {
transform: rotate(360deg);
border-radius: 200px;
cursor:pointer;
}
section #services li span {
width: 120px;
height: 20px;
display: block;
padding: 15px 0px;
color: #fff;
font-family: 'Advent Pro', sans-serif;
text-transform: uppercase;
font-size: 1.2em;
text-align: center;
}
div#wowslider-container1 {
margin-top:-800px;
margin-right:1200px;
margin-left:920px;
margin-bottom:100px;
}
.redes {
margin-top:10px;
margin-right:600px;
margin-left:650px;
margin-bottom:0px;
position:absolute;
}
.logo {
margin-top:400px;
margin-right:0px;
margin-left:23px;
margin-bottom:0px;
}
.logo2 {
margin-top:10px;
margin-right:0px;
margin-left:23px;
margin-bottom:0px;
}
.lateral {
margin-top:-1505px;
margin-right:0px;
margin-left:23px;
margin-bottom:500px;
}
.lateral2 {
margin-top:-1505px;
margin-right:0px;
margin-left:1400px;
margin-bottom:500px;
}
.glateral {
margin-top:-1950px;
margin-right:0px;
margin-left:800px;
margin-bottom:500px;
}
.clima {
margin-top:-1605px;
margin-right:0px;
margin-left:720px;
margin-bottom:500px;
}
.cabecera {
margin-top:-272px;
margin-right:0px;
margin-left:170px;
margin-bottom:1000px;
}
.texto {
background-color: lightgrey;
width: 600px;
padding: 25px;
border-radius: 25px;
border: solid blue;
margin: 25px;
margin-top:-50px;
margin-right:660px;
margin-left:600px;
margin-bottom:0px;
text-align:center;
}
.texto2 {
background-color: lightgrey;
width: 1790px;
padding: 25px;
border-radius: 25px;
border: solid blue;
margin: 25px;
margin-top:200px;
margin-right:30px;
margin-left:30px;
margin-bottom:300px;
text-align:center;
}
.texto3 {
background-color: lightgrey;
width: 600px;
padding: 25px;
border-radius: 25px;
border: solid blue;
margin: 25px;
margin-top:200px;
margin-right:660px;
margin-left:643px;
margin-bottom:0px;
text-align:center;
}
.texto4 {
background-color: lightgrey;
width: 600px;
padding: 25px;
border-radius: 25px;
border: solid blue;
margin: 25px;
margin-top:300px;
margin-right:660px;
margin-left:643px;
margin-bottom:0px;
text-align:center;
}
.formatotexto {
font:oblique bold 120% cursive;
color:black;
}
.formatotexto2 {
font:oblique 105% cursive;
color:black;
}
.formatotexto3 {
font:arial 105% cursive;
color:red;
}
.galeria1 {
margin-top:500px;
margin-right:0px;
margin-left:-350px;
margin-bottom:0px;
}
.galeria2 {
margin-top:500px;
margin-right:0px;
margin-left:-350px;
margin-bottom:0px;
}
.galeria3 {
margin-top:500px;
margin-right:0px;
margin-left:-350px;
margin-bottom:0px;
}
.ancla {
font:oblique bold 120% cursive;
color:red;
}
.gif {
margin-top:-960px;
margin-right:0px;
margin-left:0px;
margin-bottom:0px;
}
.flecha {
position: fixed;
top:-50;
right: 0;
bottom: 0;
left:1855;
display: block;
background: url(../images/flecha.png) bottom right no-repeat;
}
.transparente {
margin-top:-2500px;
margin-right:0px;
margin-left:600px;
margin-bottom:0px;
}
.Egg {
background-image:url(../images/Aznar.jpg)
}
div#wowslider-container1 {
margin-top:-800px;
margin-right:1200px;
margin-left:920px;
margin-bottom:100px;
}
a:link
{
text-decoration:none;
}
el HTML
<html>
<head>
<meta HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Parque nacional de Yellowstone</title>
<link rel="icon" href="images/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="style/css.css">
<link href='//weloveiconfonts.com/api/?family=entypo' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Raleway+Dots' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Advent+Pro:400,200,700' rel='stylesheet' type='text/css'>
</head>
<body>
<a href="http://www.elotrolado.net" class="cabecera">
<img border="0" src="images/cabecera.PNG">
</a>
<nav id="menu">
<ul class="parent-menu">
<li><a href="Geografia.html">Geografia</a>
<ul>
<li><a href="geografia.html#situacion">Situación</a></li>
<li><a href="geografia.html#relieve">Relieve</a></li>
<li><a href="geografia.html#clima">Clima</a></li>
<li><a href="geografia.html#hidrografia">Hidrografía</a></li>
</ul>
</li>
<li><a href="Geologia.html">Geología</a>
<ul>
<li><a href="Geologia.html#origenes">Orígenes</a></li>
<li><a href="Geologia.html#historia">Historia volcanica</a></li>
<li><a href="Geologia.html#geotermia">Geotermia</a></li>
<li><a href="Geologia.html#temblores">Temblores de tierra</a></li>
<li><a href="Geologia.html#vigilancia">Vigilancia y riesgos actuales</a></li>
</ul></li>
<li><a href="Historia.html">Historia</a>
<ul>
<li><a href="Historia.html#epoca">Época precolombina</a></li>
<li><a href="Historia.html#exploraciones">Exploraciones</a></li>
<li><a href="Historia.html#principios">Los principios del parque</a></li>
<li><a href="Historia.html#1945">El parque después de 1945</a></li>
</ul></li>
<li><a href="Biologiayecologia.html">Biología y ecología</a>
<ul>
<li><a href="Biologiayecologia.html#ecosistema">Ecosistema</a></li>
<li><a href="Biologiayecologia.html#flora">Flora</a></li>
<li><a href="Biologiayecologia.html#fauna">Fauna</a>
<ul>
<li><a href="Biologiayecologia.html#lobo">Reintroducción del lobo</a></li>
<li><a href="Biologiayecologia.html#bisontes">Bisontes</a> </li>
<li><a href="Biologiayecologia.html#otros">Otros mamiferos</a></li>
<li><a href="Biologiayecologia.html#peces">Peces, reptiles...</a></li>
<li><a href="aves.html" target="_blank">Aves</a></li>
<li><a href="Biologiayecologia.html#bacterias">Bacterias</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="Tienda.html">Tienda</a>
<ul>
<li><a href="tienda.html">¡En construcción!</a></li>
</ul>
</li>
<li><a href="Soporte.html">Soporte</a>
<ul>
<li><a href="Soporte.html#contacto">Contacto</a></li>
<li><a href="Soporte.html#foro">Foro</a></li>
<li><a href="Soporte.html#FAQ">FAQ</a></li>
</ul>
</li>
</ul>
</nav>
<section class="redes">
<ul id='services'>
<li class="facebook">
<a href="https://www.facebook.com" target="_blank"><div class='entypo-facebook'></div></a>
<span>Facebook</span>
</li>
<li class="twitter">
<a href="https://twitter.com/?lang=es" target="_blank"><div class='entypo-twitter'></div></a>
<span>Twitter</span>
</li>
<li>
<a href="https://plus.google.com" target="_blank"><div class='entypo-gplus'></div></a>
<span>Google Plus</span>
</li>
<li>
<a href="https://es.linkedin.com" target="_blank"><div class='entypo-linkedin'></div></a>
<span>LinkedIn</span>
</li>
</ul>
</section>
<br><br><br><br><br>
<p class="texto3">
El parque nacional de Yellowstone (en inglés: Yellowstone National Park) creado por el
Congreso de los Estados Unidos y convertido en ley por el entonces presidente Ulysses S. Grant
el 1 de marzo de 1872, es un parque nacional ubicado en los Estados Unidos, principalmente
en el estado de Wyoming, aunque se extiende por Montana e Idaho. Yellowstone, ampliamente considerado
como el parque nacional más antiguo del mundo, es famoso por su diversa fauna y sus fenómenos geotérmicos
, especialmente el Old Faithful Geyser, una de las atracciones más populares en el parque. A pesar de que
posee múltiples ecosistemas, el bosque subalpino es dominante.
<br><br>
Los nativos americanos vivieron en la región del Yellowstone por al menos 11.000 años.7 Durante la
expedición de Lewis y Clark, a principios del siglo XIX, la región fue circunvalada. Además de las
visitas de los mountain men a mediados del siglo XIX, las exploraciones organizadas no comenzaron sino
hasta la década de 1860. La armada de los Estados Unidos fue comisionada para la supervisión del parque
justo después de su establecimiento. En 1917, la administración del parque fue transferida al Servicio
de Parques Nacionales, el cual había sido creado el año anterior. Desde entonces, cientos de estructuras
han sido construidas y protegidas tanto por su importancia arquitectónica como histórica, estimando los
investigadores un total de más de 1.000 sitios arqueológicos.
<br><br>
El Parque Nacional de Yellowstone se extiende en un área de 8983 km²,2 comprendiendo lagos, cañones,
ríos y cadenas montañosas.6 El Lago Yellowstone es el lago más grande de montaña de América del Norte
y en la mitad meridional de este se encuentra la Caldera Yellowstone, el supervolcán más grande del
continente y considerado un volcán activo. Se tienen datos de que al menos en los últimos millones
de años ha entrado en erupción con una fuerza tremenda en varias ocasiones. Al menos la mitad de las
atracciones geotermales del mundo se encuentran localizadas en el Yellowstone, provocado por su fuerte
y consistente actividad volcánica. Los flujos de lava y rocas emanados por las erupciones volcánicas
cubren la mayor parte del área del Yellowstone. El parque es el centro del Gran Ecosistema de Yellowstone,
el más grande ecosistema restante y casi intacto en la zona norte de la Tierra.
<br><br>
Cientos de especies de mamíferos, aves, peces y reptiles han sido documentados, incluyendo muchos que
o han sido puestos en peligro de extinción, o amenaza. Los vastos bosques y pastizales también incluyen
especies únicas de plantas. El parque Yellowstone es el lugar más extenso con la megafauna más famosa en
los Estados Unidos continentales. Osos grizzly, lobos, manadas de bisontes y alces pastan libremente y
viven en el parque. El Yellowstone Park Bison Herd es el más grande y antiguo parque de bisontes abierto
al público en los Estados Unidos. A pesar de todo esto, los incendios forestales ocurren en el parque
cada año, tal y como el incendio de Yellowstone de 1988, donde casi un tercio del parque se quemó.
Yellowstone tiene numerosas actividades recreacionales, desde la que incluyen alpinismo, acampadas,
paseos en bote, pesca y avistamientos. Los caminos pavimentados proveen acceso cercano a las áreas de
mayor actividad geotérmica así como a algunos de los lagos y cataratas. Durante el invierno, los visitantes
a menudo acceden al parque con paseos guiados en los que se usan o coches para la nieve o motonieve.
</p>
<img src="images/logo.PNG" class="logo"/>
<img src="images/logo2.PNG" class="logo2"/>
<img src="images/logo3.PNG" class="logo3"/>
<img src="images/logo4.PNG" class="logo3"/>
<img src="images/logo5.PNG" class="logo3"/>
<img src="images/logo6.PNG" class="logo3"/>
<img src="images/lateral.PNG" class="lateral"/>
<img src="images/lateral2.PNG" class="lateral2"/>
<a href="#arriba"><div class="flecha"></div></a>
</body>
</html>
, eso es porque estas haciendo la web cuadrandola para tu resolución... deberias usar más medidas por porcentajes en los elementos y menos medidas fijas como son los pixeles.