IE6 CSS Hover Probleme mit Menü

Question

Ich habe ein CSS-Hover-Menü, das außer ... Überraschung in allen Browsern funktioniert - IE6

#menu_right ul li:hover ul { visibility: visible; }

Diese ul zunächst versteckt, offensichtlich. Als ich über die Mutter li schweben, sollte es zeigen ... aber es funktioniert nicht.

Um zu versuchen, das Problem zu lokalisieren, habe ich versucht, die ul machen zunächst sichtbar und hatte die Hover-Maßnahmen ergreifen, auf etwas anderes. Zum Beispiel:

#menu_right ul li ul { visibility: visible; }

#menu_right ul li:hover ul { background: red; }

Dies hilft nicht. Bei anderen Browsern (einschließlich IE7 +), wird die ul rot, wenn ich über die Mutter list element schweben. Aber nicht in IE6. Was bin ich?

Answer 1

IE6 kennt nicht die CSS :hover pseudo-Attribut, wenn es auf alles erscheint als ein Verbindungselement. Sie müssen JavaScript für diesen Einsatz. Versuchen Sie bedingte Anweisungen, und wenn Sie jQuery , können Sie den Hover-Effekt für den IE6 in 3-Code ( +/- Formatierung) Zeilen:

<!--[if lt IE 7]>
<script type="text/javascript">
$('#menu_right ul li').hover (function () {
  $(this).addClass ("hover");
}, function () {
  $(this).removeClass ("hover");
});
</script>
<style type="text/css">
#menu_right ul li.hover {...}
...
</style>
<![endif]-->

Mark, dass in den CSS-Anweisungen verwenden ich den Punkt anstelle des Dickdarms.

Cheers,

Answer 2

Sie sollten so etwas wie diese verwenden

<ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
</ul>

und Stil der <a> statt der <li>. Sie müssen nur sicherstellen, dass Sie die a Größe der genau die gleiche Größe als umschließende li zu sein.

div.menu ul.menu {
    margin:0;
    padding:0;
}

div.menu ul li {
    margin:0;
    padding:0;
}

div.menu ul.menu a {
    display:block;
    height:22px;
    margin:0;
    overflow:hidden;
    padding:0;
    width:252px;
}

Der Grund, warum Sie sehen werden, dass es auf jedem Browser außer IE6 funktioniert, ist, dass es :hover unterstützt nur auf <a> Elemente.

Answer 3

Schauen Sie sich auf was auch immer: Hover http://www.xs4all.nl/~ peterned / csshover.html . Dieses Baby alle möglichen seltsamen IE6 schweben Probleme löst, könnte bei Ihnen lösen.

Answer 4

Nein :hover auf alles andere als <a> ... Gott, ich liebe diesen Browser.

Versuchen zu verwenden: schweben auf einem günstig gelegenen <a> (wenn es sich um eine Liste von Links ist, wie die meisten CSS Hover-Menüs, wird es kein Problem sein), oder gehen Sie einfach mit Javascript, wie bereits vorgeschlagen

Answer 5

Es ist genau so, wie Tal schrieb. Ich weiß nicht, wie es mit Tabelle funktioniert, aber dieses Beispiel funktioniert in IE6 perfekt.

http://www.cssplay.co.uk/menus/final_drop.html