Anton: Hover Effekt bei Liste funktioniert nicht

Beitrag lesen

SELF-Forum

Hover Effekt bei Liste funktioniert nicht

Anton
– Informationen zu den Bewertungsregeln

Hallo,

ich hab mir eine horizontale Navigationsliste gebaut. Beim Überfahren eines Listenelementes mit der Maus soll es mit Hilfe von hover rot eingefärbt werden. Aus Layouttechnischen Gründen muß ich die Liste unter den Header schieben, indem ich ein negatives margin für die Liste verwende. Das klappt auch soweit. Wenn ich allerdings hingehe und mit Hilfe der Glider Levin-Methode dem Header ein Hintergrundbild zuweise, dann klappt es nichtmehr. Warum das so ist, habe ich bereits herausgefunden. Bei der Glider Levin Methode muß ich den Header ja relativ positionieren, damit das innere span Element relativ zum Header positioniert werden kann.

Genau diese relative Ausrichtung des headers führt dazu, dass der hover Effekt, bei der Liste die sich unter dem Header befindet, nichtmehr funktioniert. Im folgenden Quellcode kann man das sehr gut sehen. Wenn ich die Zeile "position: relative;" in der header ID entferne, dann klappt der hover Effekt. Lasse ich sie drin klappt es nicht. Wie kann ich das lösen?

#header {
 height: 250px;
 border-width: 1px;
 border-style: solid;
   border-color: red;
 position: relative;
}

Hier noch das ganze Testbeispiel:

  
<!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" lang="de" xml:lang="de">  
  
 <head>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  <link href="main.css" rel="stylesheet" type="text/css"/>  
 </head>  
  
 <body>  
  <h1 id="header">  
  </h1>  
  
  <ul id="navigation">  
   <li><a href="#">Link 1</a></li>  
   <li><a href="#">Link 2</a></li>  
   <li><a href="#">Link 3</a></li>  
  </ul>  
 </body>  
  
</html>  


  
* {  
 padding: 0px;  
 margin: 0px;  
}  
  
body {  
 width: 880px;  
 margin: 0px auto;  
}  
  
#header {  
 height: 250px;  
 border-width: 1px;  
 border-style: solid;  
   border-color: red;  
 position: relative;  
}  
  
#navigation {  
 float: left;  
 width: 880px;  
 margin: -50px 0px 0px 0px;  
 list-style: none;  
}  
  
#navigation li {  
 float: left;  
}  
  
#navigation a {  
   display:   block;  
 width: 100px;  
 height: 25px;  
 line-height: 25px;  
 margin: 0px 10px 0px 0px;  
 text-align: center;  
 text-decoration: none;  
 border: 1px solid black;  
   border-left-color: white;  
 border-top-color: white;  
}  
  
#navigation a:hover {  
 color: white;  
 background: red;  
}
Beitrag melden
–
Informationen zu den Bewertungsregeln