✔ DropDown Menü Darstellungsfehler im IE7

[-RaZoR-]

Hi Leute, ich baue gerade meine Seite auf (http://www.apexx.ps3n.de/). Hier habe ich in der oberen Navigation ein DropDown Menü, das in allen Browsern gut aussieht nur im IE6 und 7 nicht. Da ich aber den IE6 ausschließe, benötige ich nur Hilfe zum IE7. Die Version kann ich euch leider nicht sagen, da ich mit dem IETester teste.

Hier mal der Code:

<div id="navigation">
      <ul id="navi">
        
        
        <li><a href="index.php" class="navigationspunkt"><span class="head">Startseite</span></a></li>
          
          
        <li><a href="#" class="navigationspunkt"><span class="head">Spiele</span></a>
          <ul>
            <li><span class="unterpunkt"><a href="products.html">Spieledatenbank</a> 

<a href="manufacturers.html">Herstellerübersicht</a> 
<a href="gallery.html">Screenshots</a> 
<a href="videos.html">Videos</a> 
<a href="glossar.html">Tipps & Tricks</a> 
</span></li>
          </ul>
        </li>
          
          
        <li><a href="#" class="navigationspunkt"><span class="head">Community</span></a>

          <ul>
            <li><span class="unterpunkt"><a href="/forum/forum.php">Forum</a> 
</span></li>
          </ul>
        </li>
          
          
        <li><a href="#" class="navigationspunkt"><span class="head">Hardware</span></a>
          <ul>
            <li><span class="unterpunkt"><a href="ps3">Playstation 3</a> 

</span><br /></li>
          </ul>
        </li>
          
          
        <li><a href="#" class="navigationspunkt">Impressum</a></li>
        
          
        <li><a href="archiv.php" class="navigationspunkt"><span class="head">Archiv</span></a>
          <ul>
            <li><span class="unterpunkt"><a href="news.html">News</a> 
<a href="articles.html">Testbericht</a> 

<a href="newsarchive.html">Newsarchiv</a> 
<a href="articlearchive.html">Artikelarchiv</a> 
</span></li>
          </ul>
        </li>
     

      </ul>
      
		</div>

CSS

/*NAVIGATION*/
div#navigation {
	height: 3em;
	width: 95em;
	background: url(../layout/rec_posts_bg.png);
	background-repeat: repeat-x;
	margin: auto;
	text-align: center;
}

ul#navi {
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
}

ul#navi ul {
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
}

ul#navi li { 
  width: 10em; 
  float: left; 
}

ul#navi li ul { 
  display: none;
  position: absolute; 
  background: none repeat scroll 0 0 ##cccccc;
  margin: 0;
  padding: 0;
  width: 10em;
}

ul#navi li:hover ul { 
  display: block; 
}

ul#navi a.navigationspunkt {
  display: block;
  text-decoration: none;
  width: 10em;
  padding: 1em 0em 0em 0em;
  height: 2em;
}

ul#navi a {
  display: block;
  text-decoration: none;
  width: 10em;
  padding: 0em 0em 0em 0em;
}

#navi li li a {
  background: none repeat scroll 0 0 #cccccc;
  display: block;
  height: 2.5em;
  line-height: 2.5em;
  position: relative;
  width: 10em;
}

#navi li li a:hover {
  background: none repeat scroll 0 0 #ffffff;
}

 

[Maik]

Moin,

hab hier auf der Arbeit leider nur den IE6 zur Verfügung, und kann in ihm soweit keinen Darstellungsfehler entdecken, was das Dropdown-Menü betrifft, zumal sich die Untermenüs in ihm überhaupt nicht öffnen.

Durch den XML-Prolog vor der Doctype-Deklaration schaltet dieser in den "Quirksmode", was zur Folge hat, dass er die Seite nicht in der Fenstermitte ausrichtet.

Hast du mal einen Schnappschuß vom IE7, damit ich im Bilde bin, was er konkret falsch darstellt?

mfg Maik

 

[-RaZoR-]

Wie gesgat, in der Arbeit achte ich sher darauf, ob im IE6 alles klappt aber privat nichtmehr, da selbst MS den ie6 mit 9 Jahre alter Milch vergleicht ^^

im Anhang findest du die Bilder:

Normal. Standardansicht

Falsch: Wenn ich über den Punkt "Spiele" fahre, öffnet sich das Menü Rechts daneben über dem Punkt Community

Richtig: Aus dem Firefox öffent sich das Menü ganz normal unter der Punkt Spiele

Vielen Dank schonmal

edit:\\ Auf den Bildern ist das etwas schwer zu erkennen. Der Punkt "Spiele" ist der zweite Punkt on Links. Das Dropdown menü öffnet sich wie man aber erkennen kann auch in der Navigation nur eben neben dem Punkt "Spiele"

 

[Maik]

Versuch es mal mit diesen Regelerweiterungen:

ul#navi li { 
  width: 10em; 
  float: left; 
  position: relative; /* relative Positionierung */
}

ul#navi li ul { 
  display: none;
  position: absolute; 
  background: none repeat scroll 0 0 ##cccccc;
  margin: 0;
  padding: 0;
  width: 10em;
  top: 3em; /* Startposition von oben */
  left: 0; /* Startposition von links */
}

mfg Maik

 

[-RaZoR-]

Hehe, na sieh mal einer an. Das funktioniert!

Vielen Dank

dann hab ich noch ne Frage und zwar: Hast du vielleicht ne Idee, wieso er im IE6 garnichts anzeigt?

 

[Maik]

IE6 interpretiert die :hover-Pseudoklasse ausschließlich für das <a>-Element, die aber für das <li>-Element verwendet wird, um die Submenüs anzuzeigen.

Lösungsmöglichkeiten:

1. http://www.htmldog.com/articles/suckerfish/dropdowns/
2. http://code.google.com/p/ie7-js/

Oder ohne Zuhilfenahme von Javascript: http://www.cssplay.co.uk/menus/dd_valid.html, was aber eine Erweiterung des HTML-Codes erforderlich machen würde - siehe hierzu den Seitenquelltext dieses Beispiels (zu finden im DIV mit der ID info).

mfg Maik