Stuffi: Klappmenü mit CSS; Hover IE

SELF-Forum

Klappmenü mit CSS; Hover IE

Stuffi
– Informationen zu den Bewertungsregeln

Hallo,

möchte ein Klappmenü implementieren. Klappt auch in allen Browsern außer dem für CSS gewohnt anfälligen IE. Genauer gesagt scheint beim IE  auch nur die "hover" Funktion nicht zu gehen. Nach langen Recherchen ist mir klar das dies Problem nicht neu ist. Leider funktionieren die Lösungsansätze auf die ich gestoßen bin nicht. Ich hoffe hier kann mir jemand weiterhelfen.

ZUnächst der CSS-Code:
/* Menu */
#menu { width: 570; background: transparent;}

#menu ul { list-style: none; margin: 0; padding: 0; float: left;}

#menu j, #menu h2
  { font-family: arial;  font-size: 14px; color: #004B30;
  display: block; border-style: solid;
  border-color: #ccc #888 #555 #bbb;
  margin: 0; }

#menu h2 { border-width: 0px; font-weight: bold; background: transparent; text-transform: uppercase; padding: 3px 5px;}

#menu j { border-width: 1px; font-weight: 500; background: #fff; text-decoration: none; text-align: left; text-decoration: none; padding: 2px 5px; }

#menu j:hover {
text-decoration:  none;
color: #000000;
}

#menu a {
text-decoration:  none;
color: #004B30;
}

#menu a:hover {
text-decoration:  underline;
color: #000000;
}

#menu li {position: relative;}

#menu ul ul { position: absolute; z-index: 500; }

#menu ul ul ul { position: absolute; top: 0; left: 100%; }

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
  {display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
  {display: block;}

Jetzt ein Teil des Menüs:
<div id="menu">
                   <ul>
          <li><h2><a href="index.php">Home</a></h2></li>
          </ul>
                  <ul>
          <li><h2>|</h2></li>
          </ul>
                  <ul>
          <li><h2>Verein</h2>
            <ul>
                    <li><a href="index.php?dir=Verein/&main=struktur&submenu=V"><j>Struktur</j></li>
                    <li><a href="index.php?dir=Verein/&main=geschichte&submenu=V"><j>Geschichte</j></a></li>
                    <li><a href="index.php?dir=Verein/&main=standort&submenu=V"><j>Wo&nbsp;finden&nbsp;Sie&nbsp;uns?</j></a></li>
                    <li><a href="index.php?dir=Verein/&main=schiedsrichter&submenu=V"><j>Schiedsrichter</j></a></li>
            </ul>
          </li>
          </ul>
                  <ul>
          <li><h2>|</h2></li>
          </ul>
                  <ul>
          <li><h2>Mannschaften</h2>
            <ul>
            <li><a href="index.php?dir=1_maenner/&main=start&submenu=M1"><j>1.&nbsp;M&auml;nner</j></a></li>
            <li><a href="index.php?dir=2_maenner/&main=start&submenu=M2"><j>2.&nbsp;M&auml;nner</j></a></li>
                    <li><a href="index.php?dir=senioren/&main=start&submenu=AH"><j>Senioren</j></a></li>
            <li><j>Jugendmannschaften</j>
              <ul>
              <li><a href="index.php?dir=a-jugend/&main=start&submenu=AJ"><j>A-Jugend</j></a></li>
              <li><a href="index.php?dir=b-jugend/&main=start&submenu=BJ"><j>B-Jugend</j></a></li>
              <li><a href="index.php?dir=c-jugend/&main=start&submenu=CJ"><j>C-Jugend</j></a></li>
                      <li><a href="index.php?dir=c2-jugend/&main=start&submenu=C2J"><j>C2-Jugend</j></a></li>

Zudem hab ich im <head>-Bereich folgendes eingefügt:
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left;}
</style>
<![endif]-->

<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {behavior: url(csshover.htc); font-size: 100%;}
#menu ul li a {height: 1%;}
}
</style>
<![endif]-->

und die entsprechende Datei die das "hover" im IE ermöglichen soll runtergelden.

Wie schon gesagt funktioniert es im IE trotzdem nicht. Hab dabei erstmal nur mit Version 7.0 getestet.

Wäre schön wenn mir jemand was dazu sagen könnte.

Danke

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Klappmenü mit CSS; Hover IE

    MudGuard Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    #menu j
    #menu j:hover {
    <li><a href="index.php?dir=Verein/&main=struktur&submenu=V"><j>Struktur</j></li>

    Welche Sprache benutzt Du für das Dokument? HTML kann es nicht sein, denn HTML kennt kein j-Element.

    Der Rest des Dokument-Codes sieht aber doch fast so aus, als sollte es HTML sein.
    Der IE kann (neben seinen vielen anderen Schwächen) praktisch nicht mit nicht-HTML-Elementen in HTML-Dokumenten umgehen (Ausnahmen: die von Microsoft erfundenen Elemente)

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Klappmenü mit CSS; Hover IE

      Stuffi
      – Informationen zu den Bewertungsregeln

      Hallo,

      danke für deine Antwort. Das <j> ist ein Tag den ich selbst eingefügt habe und für das Design mit CSS brauche. Das der IE das niocht interpretiert hab ich mir fast gedacht und muss das noch ändern. Aber unabhängig davon funktioniert das Menü nicht.

      Habe das ganze von hier:

      http://www.drweb.de/leseproben/klappmenu.shtml

      Selbst wenn ich es genau so mache wie dort beschrieben funktioniert es im IE nicht. Ich vermute es liegt an dem javascript und wie es eingefügt wird. MIt dem Skript von hier:

      http://www.webdesign-haas.de/praxis/tipps/cssmenuliste.shtml

      funktioniert es halbwegs, hab ich gerade festgestellt. Aber immer noch nicht ganz so wie ich möchte. Es muss doch aber auch mit der Möglichkeit von der ersten Adresse gehen. Tut es aber komischerweise nicht.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln