CSS-Menü im IE8 falsch

L

luigied

Mitglied
Hey Leute,

ich habe versucht für meine Homepage ein Drop-down-menü zu basteln. Die "Hauptmenü-Punkte" sind horizontal angeordnet. Beim Mausover, soll direkt darunter eine Liste mit Unterpunkten aufklappen.

Mein Code:

HTML:
HTML: 
<div class="Menu_hidden">
          <div class="Menu_move" id="Menu" style="width:0%;height:41px">
          <ul class="menu_list">
            <li id="home">
            <a href="home.php">Home</a>
            <ul class="single_list">
              <li>
                <a href="home.php">Startseite</a>
              </li>
              <li>
                <a href="www.google.com">Tsch&uuml;ss</a>
              </li>
            </ul>
            </li>
            <li id="ich">
            <a href="ich.php">Meine Wenigkeit</a>
            <ul class="single_list">
              <li>
                <a href="ich.php">Pers&ouml;nliches</a>
              </li>
              <li>
                <a href="kontakt.php">Kontakt</a>
              </li>
              <li>
                <a href="hobbies.php">Interessen</a>
              </li>
            </ul>
            </li>
            <li id="musik">
            <a href="musik.php">Musik</a>
            <ul class="single_list">
              <li>
                <a href="elektronisches.php">Elektronisches</a>
              </li>
              <li>
                <a href="rock.php">Handgemachtes</a>
              </li>
            </ul>
            </li>  
            <li id="prog">
            <a href="Werke.php">Eigene Werke</a>
            <ul class="single_list">
              <li>
                <a href="prog.php">Programme</a>
              </li>
              <li>
                <a href="video.php">Videos</a>
              </li>
            </ul>
            </li>   
            <li id="galerie">
            <a href="bildergalerie.php">Bilder</a>
            <ul class="single_list">'
             .$galery_menu 
          .'</ul></li>   
          <li id="guestbook">
            <a href="guestbook2.php.php">G&auml;stebuch</a>
          <ul>
              <li>
                <a href="guestbook2.php.php">G&auml;stebuch</a>
              </li>
            </ul>
            </li> 
          <ul>
          </div>
          </div>
Das Ganze ist ein String, der in einer PHP-Variable gespeichert ist. $galery_menu wird also noch eingesetzt ;)

Code: 
.Menu_hidden {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 1000px;
    height: 40px;
}
.Menu_move {
      height: 40px;
      text-align: center;
      float: left;
      background-image:url(../bin/background/menu_bg.png);
}

.Menu {
      margin-top: 5px;
      text-align: center;
      float: left;
      background-image:url(../bin/background/menu_bg.png);
      height: 40px;
      width: 1000px;
}

.Content {
      margin-top:0px;
      margin-bottom: 0px;
      padding: 10px;
      width: 1000px;
      min-height: 700px;
      background-image:url(../bin/background/content_bg_main.png);
      background-repeat: repeat-y;
}

.page {
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
      text-align: left;
}

ul.menu_list, ul.menu_list ul{
      z-index:2;
      margin-left: auto;
      margin-right: auto;
      padding: 0px;
      text-align: center;
      color: #FFBB00;
      font-weight: bold;
}

ul.menu_list li {
      padding: 0px;
      float: left;
      background-image: url(../bin/background/menu_normal.jpg);
      list-style-type: none;
      margin: 5px 5px 0px 0px;
      position: relative;
      border: 1px solid #0000EE;
      text-align: center;
      color: #FFBB00;
      font-weight: bold;
      width: 140px;
      height: 20px;
}

/*ul.menu_list li > ul {
      visibility: hidden;
      display: none;
      position: absolute;
      top: 20px;
}*/
.single_list {
      visibility: hidden;
      display: none;
      position: absolute;
      top: 20px;
}

ul.menu_list li:hover > ul {
      margin-top: 0px;
      visibility: visible;
      display: block;
}

ul.menu_list li:hover{
   background-image: url(../bin/background/menu_hover.jpg);
       color: #0000FF;
}

a:hover{
       background-image: url(../bin/background/menu_hover.jpg);
       color: #0000FF;
}

Das Ganze wird im Firefox korrekt angezeigt. Im IE8 werden die Unterpunkte nicht einmal ausgeblendet.

Kann mir einer sagen, was ich falsch mache? Habe mir schon Anregungen bei Online-Tutorials geholt.

Danke im Voraus.

Mfg LuigiEd
 
luigied hat gesagt.:
Das Ganze wird im Firefox korrekt angezeigt. Im IE8 werden die Unterpunkte nicht einmal ausgeblendet.

Kann mir einer sagen, was ich falsch mache?
Zum Vergrößern anklicken....
Für das HTML-Dokument keinen oder den falschen Doctype deklarieren, wodurch die Browserwelt in den "Quirks Mode" schaltet.

Dieser Darstellungsmodus hat grundsätzlich im IE7 u. IE8 zur Folge, dass sie sich abwärtskompatibel wie ihr berühmter Vorgänger IE6 (und älter) verhalten, der die :hover-Pseudoklasse ausschließlich auf den <a>-Tag anwendet, und im CSS den Deklarationsblock li:hover ul {display:block} nicht interpretiert, der in den CSS-Menüs zum Anzeigen der versteckten Untermenüebenen beim Überfahren der Mennüoberpunkte dient.

Die Seite mit dem richtigen Dokumenttyp ausgezeichnet, um sie den Browsern im standardkonformen Modus zu übergeben, und dein gezeigter Code funktioniert reibungslos im IE7 / IE8.

 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück