problem dass mein "dropdown"-menü im ie nicht funktioniert

Status
Nicht offen für weitere Antworten.

Promaetheus

Mitglied
Ich habe mir, auch dank Maik´s Hilfe, nun ein recht nettes "Dropdown"-Menü mittels Css zusammengebastelt. Natürlich ist das Ganze sicher nicht wunderschön gelöst seitens Css, aber ich bin ja nur Anfänger.
Ich habe das Ganze dann auch getestet. Im Mozilla lief es sofort, im IE7 erst nachdem ich die DocType Zeile hinzugefügt hatte. Komischerweise funktioniert es im IE6 aber nicht.

DocType Zeile damit es in IE7 funktioniert:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//DE" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Css Style:
Code:
#ddmenu, #ddmenu ul {padding:0; margin:0; list-style-type: none;}

#ddmenu a {font-size: 14px;font-weight:bold; color: black;}
#ddmenu li ul li a {font-size: 10px; color: #000066;}

#ddmenu li {float:left;position:relative;line-height: 24px; width: 112px;text-align:center;background:background:#FF0000;padding:3px;}
#ddmenu li ul li {background: #A3B6D0; border: 1px solid black; text-align:left;}
#ddmenu li ul li:hover {background: #768396;}

#ddmenu li ul {display: none;}
#ddmenu li:hover > ul {display:block; position:absolute; top:-1px; left:118px;}
#ddmenu > li:hover > ul {left:0; top:30px;}

Mein Menü in HTML (der Übersichtlichkeit halber habe ich die Links nicht komplett ausgeführt):
Code:
<ul id="ddmenu">
  <li><a>Top 1</a></li>
  <li><a>Top 2</a>
    <ul>
      <li><a>Sub 1</a></li>
      <li><a>Sub 2</a>
        <ul>
          <li><a>SubSub 1</a></li>
          <li><a>SubSub 2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a>Top 3</a></li>
</ul>

Was mache ich da falsch? Oder kann der IE6 auch keine Listenelemente mittels Css anzeigen? Dann wäre meine ganze Arbeit umsonst?
 
Zuletzt bearbeitet:
Hi,

dass sich im IE6 die Submenüs nicht öffnen, liegt daran, dass er die allgemeine Pseudoklasse li:hover nicht unterstützt, sondern nur für Verweise, also a:hover.

Bei Stu Nicholls' Menus - Multi-Level CSS Only findest du sicherlich den passenden und im IE6 lauffähigen Ersatz für dein Dropdown-Menü.
 
Danke Maik (wiedermal ;))

Ich werde versuchen dass ich mir dieses Menü umbauen kann, da ich das ganze ja auch verstehen möchte. Es war zwar für mich schon schwer durch diese "direkten" Vererbungen durchzublicken, jedoch werde ich es vielleicht schon schaffen.

Das heisst also dass ich, anstatt die <li>´s zu formatieren die links selbst formatieren muss. Kann ich das überhaupt erreichen indem ich mein bisheriges Menü umbaue oder muss ich wieder ganz von vorne anfangen? Die Schwierigkeit bestand für mich darin dass das 1. Element anders formatiert ist als die Untermenüs.
 
Wenn du auf Stu Nicholls' CSS-Dropdown-Menüs zurückgreifen möchtest, wären neben den Ergänzungen im Stylesheet auch Erweiterungen im HTML-Code erforderlich - schau dir hierfür einfach mal die Quellcodes der Menüs an, um einen Eindruck zu gewinnen, wie es der Autor gelöst hat.

Am besten übernimmst du dann den kompletten HTML- und CSS-Code solch eines Menüs, und passt das Stylesheet auf deine Vorstellungen an.

Ansonsten hättest du auch die Möglichkeit, den IE6 mit Javascript zu bedienen, damit er die Submenüs öffnet (siehe hierzu http://www.htmldog.com/articles/suckerfish/dropdowns/example/), was dann weniger "Umbauarbeiten" am Quellcode erfordert.
 
Danke Maik!

Ich hatte mir vorher dieses Menü von Stu Nicholls angesehen: http://www.cssplay.co.uk/menus/final_drop.html

Leider ist das 1. SO umfangreich dass ich nicht mehr wirklich verstehe was hier abläuft und 2. klappen beim hovern der Submenüs sofort alle folgenden Submenüs auch auf. Deshalb wäre die Lösung die ich jetzt "zusammengebastelt" habe perfekt gewesen.

Ich verstehe zum Beispiel nicht warum folgendes nicht funktioniert:

Code:
#ddmenue, #ddmenue ul {padding:0; margin:0; list-style-type: none;}

#ddmenue a {font-size: 14px;font-weight:bold; color: black;}
#ddmenue li ul li a {font-size: 10px; color: #000066;}

#ddmenue li {float:left;position:relative;line-height: 24px; width: 112px;text-align:center;background:#ff0000;padding:3px;}
#ddmenue li ul li {background: #A3B6D0; border: 1px solid black; text-align:left;}
#ddmenue li ul li a:hover {background: #768396;}

#ddmenue li ul {display: none;}
#ddmenue li a:hover > ul {display:block; position:absolute; top:-1px; left:118px;} /* bei hovern des links im top-listenelement klappt das 1. untermenü auf */
#ddmenue > li a:hover > ul {left:0; top:30px;} /* durch hovern über den 1. subemülink klappt das jeweils nächste tochterelement auf.

Code:
<ul id="ddmenue">
  <li><a href="">Top 1</a></li>
  <li><a href="">Top 2</a>
    <ul>
      <li><a href="">Sub 1</a></li>
      <li><a href="">Sub 2</a>
        <ul>
          <li><a href="">SubSub 1</a></li>
          <li><a href="">SubSub 2</a>
            <ul>
              <li><a>SubSubSub 1</a></li>
              <li><a>SubSubSub 2</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="">Top 3</a></li>
</ul>

Hier habe ich doch durch das Hovern über den Link eindeutig festgelegt dass die Submenüs sichtbar werden sollen oder?
 
Bei mir öffnet sich immer nur das jeweilige Submenü.

Und dass es bei dir trotz a:hover > ul noch immer nicht funktioniert, liegt daran, dass der IE auch den Kind-Selektor ">" nicht unterstützt.

Wenn dir aber Stu Nicholls' Technik zu kompliziert ist, dann greif doch einfach auf das von mir ebenfalls empfohlene Suckerfish Dropdown zurück.
 
Die Suckerfish Lösung wollte ich nicht verwenden da ich auf JavaScript verzichten möchte. Deshalb hätte mir das mit den versteckten DIVS auch sehr gut gefallen. Also muss ich jetzt noch eine Lösung ohne Kind-Element finden, dann würde mein Skript funktionieren.

Komischerweise funktioniert die oben eben angesprochene Lösung auch nicht im Mozilla und IE7?! Also wird es wohl nicht nur an den Kindelementen liegen.

Die Lösung von Stu Nicholls kann ich leider nicht verwenden, da man hier auch für den Internetexplorer noch zusätzlich Tabellen einfügen muss, was mir aber nicht möglich ist, da das Menü wieder dynamisch mittels php generiert wird.

Deshalb wäre die 1. Lösung von mir natürlich (für mich) perfekt gewesen, nur funktioniert sie leider im IE6 nicht.

Gibt es vielleicht einen einfachen Workaround für meine UR-Version?
 
Ich habe mich jetzt doch für die Suckerfish Methode entschieden, denn wer JavaScript ausgeschaltet hat der kann ja noch immer auf den Hauptmenüpunkt klicken.

Danke nochmal für deine Hlife Maik!
 
Status
Nicht offen für weitere Antworten.
Zurück