# CSS-Menü im IE8 falsch



## luigied (19. Februar 2011)

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:

```
<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 


```
.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


----------



## SpiceLab (19. Februar 2011)

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?


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.


Der »DOCTYPE-Switch« und seine Auswirkungen
Workshop Doctype-Switch: Teil 1 - Doctype-Switching
Workshop Doctype-Switch: Teil 2 - Browser-Übersicht


----------



## luigied (20. Februar 2011)

Ich danke dir. Das hat mir sehr geholfen. Ich werde mich bei Gelegenheit nch mehr mit dem Doctype beschäftigen.


----------

