aufklappende Navi verschwindet im IE

[wumble]

Einen schönen guten Tag
Hab mal wieder nen Problem mit dem IE 6
Hab mir auf einer Seite eine aufklappende Navi gebastelt, hab auch schon extra Styleangaben für den IE eingebunden damit es überhaubt so funktioniert wie es nun funktioniert, aber dennoch klappt es nicht ganz.
Zu finden ist das Problem >>hier<<

Das Problem ist folgendes, wenn man über die Navi fährt, erscheint zwar die Subnavi aber wenn man über Geschichte oder Verein geht und versucht an die untersten Punkte zu kommen verschwindet die Navi auf einmal. Mit dem Firefox geht dies einwandfrei, aber nicht mit dem IE 6.

Hier der Code der geasamten Page wo man sieht wie die Navi eingebunden wird:

    <div id="page">
      <img src="jpgs/header.jpg" alt="" style="width: 800px; height: 200px; border: none; margin: 0px;" />
      <div id="navi"><?php include("navi/navi.php"); ?></div>
      <div id="content">
        <div id="textfeld">
          <?php include($dateien[$page]); ?>
        </div>
      </div>
    </div>

und hier der Code der Navi:

<div class="menu">

<ul>
<li><a class="hide" href="#"><div id="home"> </div></a>

<!--[if lte IE 6]>
<a href="#" style="width:74px;"><div id="home"> </div>
<table><tr><td>
<![endif]-->

	<ul>
  <li class="tab_home"><a href="?page=home">Home</a></li>
	<li class="tab_home"><a href="?page=news">News</a></li>
	<li class="tab_home"><a href="?page=archiv">Archiv</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="#"><div id="club"> </div></a>

<!--[if lte IE 6]>
<a href="#" style="width:93px;"><div id="club"> </div>
<table><tr><td>
<![endif]-->

	<ul>
	<li class="tab_club"><a href="?page=texte&t=club">Gründung</a></li>
	<li class="tab_club"><a href="?page=texte&t=mitglieder">Mitglieder</a></li>
	<li class="tab_club"><a href="?page=texte&t=user">Mitglied werden</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="#"><div id="verein"> </div></a>

<!--[if lte IE 6]>
<a href="#" style="width:82px;"><div id="verein"> </div>
<table><tr><td>
<![endif]-->

	<ul>
	<li class="tab_verein"><a href="?page=team">Mannschaft</a></li>
	<li class="tab_verein"><a href="?page=vorstand">Vorstand</a></li>
	<li class="tab_verein"><a href="?page=texte&t=spielplan">Spielplan</a></li>
	<li class="tab_verein"><a href="?page=texte&t=tabelle">Tabelle</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="#"><div id="history"> </div></a>

<!--[if lte IE 6]>
<a href="#" style="width:131px;"><div id="history"> </div>
<table><tr><td>
<![endif]-->

	<ul>
  <li class="tab_history"><a href="?page=texte&t=verein">Gründung</a></li>
  <li class="tab_history"><a href="?page=erfolge">Vereinsgeschichte</a></li>
  <li class="tab_history"><a href="?page=texte&t=uefa">Uefa Cup</a></li>
  <li class="tab_history"><a href="?page=texte&t=trainer">Trainer seit 1955</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="#"><div id="stadien"> </div></a>

<!--[if lte IE 6]>
<a href="#" style="width:84px;"><div id="stadien"> </div>
<table><tr><td>
<![endif]-->

	<ul>
    <li class="tab_stadien"><a href="?page=stadion&s=lehen">Lehen</a></li>
    <li class="tab_stadien"><a href="?page=stadion&s=kles">Kleßheim</a></li>
    <li class="tab_stadien"><a href="?page=stadion&s=sak">SAK- Platz</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="#"><div id="bilder"> </div></a>

<!--[if lte IE 6]>
<a href="#" style="width:89px;"><div id="bilder"> </div>
<table><tr><td>
<![endif]-->

	<ul>
  	<li><a class="tab_bilder" href="?page=bilder">Bilder</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="#"><div id="kontakt"> </div></a>

<!--[if lte IE 6]>
<a href="#" style="width:102px;"><div id="kontakt"> </div>
<table><tr><td>
<![endif]-->

	<ul>
    <li class="tab_kontakt"><a href="?page=guestbook">Gästebuch</a></li>
    <li class="tab_kontakt"><a href="?page=kontakt">Kontakt</a></li>
    <li class="tab_kontakt"><a href="?page=links">Links</a></li>
    <li class="tab_kontakt"><a href="?page=texte&t=imp">Impressum</a></li>
	</ul>

	<!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->

	</li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

<img src="jpgs/navi/rechts.jpg" alt="" style="width:144px; height:32px; border:none; float:left;" />
</div>

die entscheidenen CSS Anweisungen sehen so aus:
für alle Browser:

.menu {width:800px; position:relative; margin:0; font-size:11px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; text-align:center; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0px; margin:0px; list-style-type: none; }
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}

.menu ul li:hover ul {display:block; position:absolute; top:32px; left:0;}
.menu ul li:hover ul li a.hide {background:#A02EDB; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#A02EDB; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#A02EDB; color:#FFF; height:20px; border:1px solid #000; border-top: 0px;}
.menu ul li:hover ul li a:hover {background:#FFFFFF; color:#A02EDB; border:1px solid #000; border-top: 0px;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}

und für den IE:

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:32px; left:0;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#A02EDB; color:#FFF; border:1px solid #000; border-top: 0px;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#FFF; color:#A02EDB;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}

Wenn jemand ne Idee hat woran es liegt, lasst es mich bitte wissen

 

[planet4]

hallo,

da der IE nicht so eine parktische Web Developer Toolbar hat wie der Firefox, kann man die Ursache dieser
falschen Darstellung nicht so leicht finden

Es sieht so aus, als mache der IE die ausgeklappten Menüs zu kurz (bei den kürzeren funktioniert es ja)
gib doch den <ul> oder <li> mal einen farbigen Rahmen, damit du sehen kannst, wie weit sie gehen.

Mir ist gerad noch was aufgefallen: nur der jeweils erste Unterpunkt (z.B. "Gründung") wird im IE über die
ganze Breite des Menüs als Link dargestellt, bei den restlichen Punkten geht der Link nur so weit das
Wort reicht (z.B. "Vereinsgeschichte") rechts und links davon ist kein anklickbarer Bereich mehr. Warum
ist das so? hängt vielleicht mit deinem anderen Problem zusammen?

planet4.

 

[wumble]

Danke für den Hinweis!
Es lag daran das ich den li tags eine Klasse zugewiesen habe, aber nicht den a tags. Deswegen machte der IE die Links zu kurz, nun macht er sie länger und es funzt alles.
Aber warum meintest du das es bei den kürzen funktionierte? bei mir im IE hat es z.B auch bei den Vereinlinks nicht funktioniert.Und die li haben doch einen Rahmen, oder nicht?

 

[planet4]

Aber warum meintest du das es bei den kürzen funktionierte?

ich meinte mit "kürzer" in diesem Fall: nach unten kürzer - also die, die nur ein oder zwei Unterpunkte hatten

Und die li haben doch einen Rahmen, oder nicht?

ja, haben sie, ich sehe jedenfalls einen. hätte ja aber sein können, dass die <li>s aus den <ul>s raushängen und es damit zusammenhängt,
aber jetzt lag es ja an den <a>s, ist ja gut, wenn's jetzt funktinoiert.

planet4.