nicht angemeldet
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 finden Sie 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. Männer</j></a></li>
<li><a href="index.php?dir=2_maenner/&main=start&submenu=M2"><j>2. Mä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
MudGuard