css dropdown menu in IE6 niet zichtbaar

Door Superman op 24-03-2008 17:48

1.260 views

Heb de volgende code toegepast om een css dropdown menu te creeeren. In Oprah, IE7, Firefox etc werkt die perfect. Behalve uiteraard in IE 6.

Heb de volgende link gevonden waarin het wordt uitgelegd maar kom er maar niet uit.

http://www.webmastercity.nl/forum/viewtopic.php?t=20070

Zou iemand zo vriendelijk willen zijn om de code te willen aanpassen of om we op t goede pad te zeten.

Hier iig de html


<div id="container">
	<br><br>
	<ul id="navigation-1">
		<li><a href="#" title="Welkom">Welkom</a></li>
		<li><a href="#" title="Mededelingen">Mededelingen</a></li>
		<li><a href="#" title="Agenda">Agenda</a></li>

		<li><a href="#" title="Informatie">Informatie</a>
			<ul class="navigation-2">
				<li><a href="#" title="Algemeen">Algemeen</a></li>
				<li><a href="#" title="Staf team">Staf team</a></li>
				<li><a href="#" title="Technieken">Technieken <span>&raquo;</span></a>
					<ul class="navigation-3">
						<li><a href="#" title="Kompas & Kaart">Kompas & Kaart</a></li>
						<li><a href="#" title="Tochttechnieken">Tochttechnieken</a></li>
					</ul>
				</li>
				<li><a href="#" title="Materiaal">Materiaal <span>&raquo;</span></a>
					<ul class="navigation-3">
						<li><a href="#" title="Guitar Stands">Rugzak</a></li>
						<li><a href="#" title="Strings">Slaapzak</a></li>
						<li><a href="#" title="Tuners">Slaapmatje</a></li>
						<li><a href="#" title="Plectrums">(Berg)schoenen</a></li>
						<li><a href="#" title="Capos">Sokken</a></li>
					</ul>
				</li>
				<li><a href="#" title="Bass Guitars">Uniform</a></li>
				<li><a href="#" title="Bass Guitars">Bestanden</a></li>
				<li><a href="#" title="Bass Guitars">Verhalen</a></li>
			</ul>
		</li>
		<li><a href="#" title="Gastenboek">Gastenboek</a>

		</li>
		<li><a href="#" title="Foto's">Foto's</a>
			<ul class="navigation-2">
				<li><a href="#" title="Foto Album">Foto Album</a></li>
				<li><a href="#" title="Groot formaat">Groot formaat</a></li>
				<li><a href="#" title="Smoelenboek">Smoelenboek</a></li>
				<li><a href="#" title="Groepsfoto's">Groepsfoto's</a></li>
			</ul>
		</li>
		<li><a href="#" title="Links">Links</a>
			<ul class="navigation-2">
				<li><a href="#" title="Scouting NL">Scouting NL</a></li>
				<li><a href="#" title="Regio ZO Brabant">Regio ZO Brabant</a></li>
				<li><a href="#" title="Schotland">Schotland</a></li>
				<li><a href="#" title="Overig">Overig</a></li>

		</ul>
		</li>
	</ul>
	
</div>

En het css gedeelte



ul#navigation-1
	{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; font:normal 8pt verdana, arial, helvetica;}

ul#navigation-1 li
	{ margin:0; padding:0; display:block; float:left; position:relative; width:120px; }

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited
	{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#000000; color:#ffffff; width:120px; height:13px; }

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active
	{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#2a78ca; color:#ffffff; width:118px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }
	
ul#navigation-1 li ul.navigation-2
	{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:118px; position:absolute; top:21px; left:-1px; border:1px solid #000000; border-top:none; }

ul#navigation-1 li:hover ul.navigation-2
	{ display:block; }

ul#navigation-1 li ul.navigation-2 li
	{ width:118px; clear:left; width:118px; }

ul#navigation-1 li ul.navigation-2 li a:link,

ul#navigation-1 li ul.navigation-2 li a:visited
	{ clear:left; background:#2a78ca; padding:4px 0; width:118px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li:hover a,

ul#navigation-1 li ul.navigation-2 li a:active,

ul#navigation-1 li ul.navigation-2 li a:hover
	{ clear:left; background:#429efe; padding:4px 0; width:118px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3
	{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:117px; top:-2px; padding:1px 1px 0 1px; border:1px solid #000000; border-left:1px solid #000000; background:#ffffff; z-index:900; }

ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
	{ display:block; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
	{ background:#2a78ca; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
	{ background:#429efe; }
ul#navigation-1 li ul.navigation-2 li a span
	{ position:absolute; top:0; left:105px; font-size:12pt; color:#c3d9ff; }

ul#navigation-1 li ul.navigation-2 li:hover a span,

ul#navigation-1 li ul.navigation-2 li a:hover span
	{ position:absolute; top:0; left:105px; font-size:12pt; color:#ffffff; }