Bruzzler: Navigation mit Hover Effekt wird im IE nicht dargestellt

Beitrag lesen

SELF-Forum

Navigation mit Hover Effekt wird im IE nicht dargestellt

Bruzzler
– Informationen zu den Bewertungsregeln

Hallo zusammen,

bin neu hier in diesem Forum, aber glaubt mir, ich habe schon ewig gesucht und auch schon viele Tipps gefunden, wie man den Hover Effekt auch im IE <=6 einbinden kann. Allerdings bin ich doch zu sehr Anfänger, und hoffe auf Eure Hilfe.
Im Firefox sieht ja alles soweit ganz schön aus, nur wie bekomme ich den gleichen (hover) Effekt im IE hin?

Vielen Dank schonmal.
Bruzzler

Hier der HTML Code und das CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Unbenanntes Dokument</title>  
<link href="css/navi.css" rel="stylesheet" type="text/css" />  
</head>  
  
<body><div id="container">  
<div id="navigation">  
    <ul id="nav">  
      <li class="on"><a href="#">Home</a></li>  
      <li class="off"><a href="#">Über mich</a></li>  
      <li class="off"><a href="#">Galerie</a>  
          <ul id="subnav_gal">  
            <li><a href="#">Buch</a></li>  
            <li><a href="#">Film</a></li>  
            <li><a href="#">Kunst</a></li>  
            <li><a href="#">Architektur</a></li>  
            <li><a href="#">Technik</a></li>  
          </ul>  
      </li>  
      <li class="off"><a href="#">Referenzen</a></li>  
      <li class="off"><a href="#">Kontakt</a></li>  
    </ul>  
  </div>  
  </div>  
</body>  
</html>  


* {  
 margin: 0;  
 padding: 0;  
}  
body {  
 background-color: #7a7a82;  
}  
  
  
#container {  
 padding: 2px 50px 2px 50px;  
 width: 940px;  
 margin: 0 auto;  
}  
  
#navigation {  
 vertical-align: middle;  
}  
  
#nav {  
 margin-left: 142px;  
}  
  
#nav li.on ul, #nav li.off ul {  
 margin: 0;  
 padding: 0;  
}  
  
#nav a {  
 text-decoration: none;  
}  
  
#nav li { /*float the main list items*/  
 margin: 0;  
 float: left;  
 display: block;  
 text-align:center;  
 padding: 0 8px;  
}  
  
#nav li ul {  
 display: none;  
}  
  
#nav .off #subnav_gal {  
 margin-left: -260px;  
  
}  
  
#nav li.off ul, #nav li.on ul { /*put the subnav below*/  
 position: absolute;  
 top: 153px;  
 *top: 155px;  
 background: #d6e3b0;  
 height: 28px;  
 width: 524px;  
 *width: 554px;  
 padding-left: 110px;  
 *padding-left: 80px;  
}  
  
#nav li a {  
 color: #d6e3b0;  
 font-weight: bold;  
 display: block;  
 height: 15px;  
 width: 100px;  
 border: 2px solid #d6e3b0;  
 padding: 5px;  
}  
  
#nav li.on a {  
 border: 2px solid #d6e3b0;  
 color: #d6e3b0;  
}  
  
#nav li.on ul a, #nav li.off ul a {  
 float: left; /*ie doesn't inherit the float*/  
 border: 0;  
 color: #7a8566;  
 width: auto;  
 margin-right: 15px;  
}  
  
#nav li.on ul {  
 display: block;  
}  
  
#nav li.off:hover ul {  
 display: block;  
 z-index: 6000;  
}  
  
#nav li.off a:hover, #nav li:hover a {  
 background: #d6e3b0;  
 color: #7a8566;  
}
Beitrag melden
–
Informationen zu den Bewertungsregeln