✔ li:hover funktioniert nicht im IE => Ersatz gesucht!

Status
Nicht offen für weitere Antworten.
acquire

acquire

Mitglied
Hallo zusammen,

ich habe folgendes CSS-Menü. im Firefox funktioniert es, im IE nicht. Wie ich über das Forum herausgefunden habe liegt das daran, dass der IE die :hover-Pseudoklasse ausschliesslich für das a-Element anerkennt.

Meine Frage lautet nun: Was für einen ersatz gibt es, ohne den HTML-Code zu verändern (ich kann ausschließlich Listen verwenden, ohne Zusätze, also nur ul- und li-Tags pur).

Ich hoffe es weiß einer Rat, ich konnte bisher nichts entsprechendes finden (ohne nur Listen zu verwenden).

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<style type="text/css">
ul, ul ul {padding:0; margin:0; border:0; width:10em; height:100%; list-style-type:none;}
ul ul {margin-left:1em;}
ul li {text-indent:0.5em;}
ul li ul {display:none; height:4em;} /*Hoehe angeben, damit Restmenu nach unten verrueckt wird =>Hoehe=Submenuhoehe*/
ul li:hover ul, ul li a:hover ul {display:block;}
ul li:hover ul li:hover a, ul li a:hover ul li a:hover {display:block; color:#ff0000;}
  </style>
  <title></title>
</head>
<body>

<ul>
  <li><a href="main.html">Hauptmenupunkt</a>
          <ul>
            <li><a href="a.html">Submenu A</a></li>
            <li><a href="b.html">Submenu B</a></li>
            <li><a href="c.html">Submenu C</a></li>
          </ul>
  </li>
  <li><a href="main.html">Hauptmenupunkt</a>
          <ul>
            <li><a href="a.html">Submenu A</a></li>
            <li><a href="b.html">Submenu B</a></li>
            <li><a href="c.html">Submenu C</a></li>
          </ul>
  </li>
</ul>

</body>
</html>
 
Zuletzt bearbeitet:
Hi,

schau dir hierfür mal das Suckerfish-Dropdown an, das den älteren IEs mit etwas JS-Code unter die Arme greift, und somit keine sonderlichen Änderungen im HTML-Code vorgenommen werden müssen.
 
moin

setz den Hover auf den A-Tag

bspw. so

Code: 
/*das gleiche musste du ca. auch so machen, nur ohne die Hover eigenschaften*/
ul li a {
display: block;
/*DATEN INSERT*/
}

ul li a:hover {
display: block;
/*hier kommt dann der rest rein der für den Hover wichtig ist*/
}
so geht das bei mir immä :)
 
@ Maik:

Daran habe ich gerade herumprobiert - ich kriege das nicht zum Laufen.
Ist in meinem Quellcode ein Fehler?:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
ul, ul ul {padding:0; margin:0; border:0; width:10em; height:100%; list-style-type:none;}
ul ul {margin-left:1em;}
ul li {text-indent:0.5em;}
ul li ul {display:none; height:4em;} /*Hoehe angeben, damit Restmenu nach unten verrueckt wird =>Hoehe=Submenuhoehe*/
ul li:hover ul, ul li a:hover ul, ul li:sfhover ul {display:block;}
ul li:hover ul li:hover a, ul li a:hover ul li a:hover, ul li:sfhover ul li:sfshover a {display:block; color:#ff0000;}
  </style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>  

  <title></title>
</head>
<body>

<ul>
  <li><a href="main.html">Hauptmenupunkt</a>
          <ul>
            <li><a href="a.html">Submenu A</a></li>
            <li><a href="b.html">Submenu B</a></li>
            <li><a href="c.html">Submenu C</a></li>
          </ul>
  </li>
  <li><a href="main.html">Hauptmenupunkt</a>
          <ul>
            <li><a href="a.html">Submenu A</a></li>
            <li><a href="b.html">Submenu B</a></li>
            <li><a href="c.html">Submenu C</a></li>
          </ul>
  </li>
</ul>

</body>
</html>


@Gunah: Ich verstehe leider nicht was du meinst.
 
Dem ul-Listenelement der ersten/obersten Menüebene fehlt zumindest schon mal die erforderliche ID #nav, die ihm im ScriptCode zugewiesen wird, und dementsprechend muss sie im Stylesheet auch in den einzelnen Selektoren angegeben werden.

Vergleich hierzu doch einfach nochmal deinen HTML- u. CSS-Code mit dem in dem Artikel.
 
ok kurze eklärung zu meinen Sachen:

der IE6 <= kann nur in A-Tags ein Hover haben... in allen anderen wird der Ignoriert
 
Da es heute im Forum ungewöhnlich ruhig zugeht, hab ich mal fix den Quellcode "modifiziert", bevor ich noch mit dem "Däumchendrehen" beginne ;-)

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#nav, #nav ul  {padding:0; margin:0; border:0; width:10em; height:100%; list-style-type:none;}
#nav ul {margin-left:1em;}
#nav li {text-indent:0.5em;}
#nav li ul {display:none; height:4em;} /*Hoehe angeben, damit Restmenu nach unten verrueckt wird =>Hoehe=Submenuhoehe*/
#nav li:hover ul, #nav li.sfhover ul {display:block;}
</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

  <title></title>
</head>
<body>

<ul id="nav">
  <li><a href="main.html">Hauptmenupunkt</a>
          <ul>
            <li><a href="a.html">Submenu A</a></li>
            <li><a href="b.html">Submenu B</a></li>
            <li><a href="c.html">Submenu C</a></li>
          </ul>
  </li>
  <li><a href="main.html">Hauptmenupunkt</a>
          <ul>
            <li><a href="a.html">Submenu A</a></li>
            <li><a href="b.html">Submenu B</a></li>
            <li><a href="c.html">Submenu C</a></li>
          </ul>
  </li>
</ul>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück