List menu in IE6 werkend krijgen

  • Onderwerp starter Onderwerp starter jd m
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.

jd m

Gebruiker
Lid geworden
9 aug 2007
Berichten
107
Hallo,

Ik gebruik voor een website een list menu in combinatie met CSS. In firefox werkt dit menu prima, maar ik IE6 klapt het menu niet uit als je erover heen gaat. Het menu is validated XHTML dus daar zal het niet aan liggen.

Dit is het CSS script:
Code:
.menu { 
margin: 10px; 
height: 100px; 
font-size: 10pt; 
font-family: arial; 
}

.menu ul { 
margin: 0pt; 
padding: 0pt; 
position: relative; 
z-index: 500; 
list-style-type: none; 
width: 13em; 
}

.menu li { 
background-color: #330099; 
float: left; 
}


.menu table { 
position: absolute; 
border-collapse: collapse; 
top: 10pt; 
left: 10pt; 
z-index: 100; 
font-size: 1em; 
margin-top: -1px; 
}

.menu a, .menu a:visited { 
border: 1px solid #ffffff; 
display: block; 
text-decoration: none; 
height: 2em; 
line-height: 2em; 
width: 13em; 
color: #ffffff; 
padding-left: 1em; 
font-weight: bold; 
font-style: normal; 
font-variant: normal; 
text-transform: none; 
}

.menu b { 
float: right; 
margin-right: 5px; 
}


.menu li:hover { 
position: relative; 
}

.menu a:active, .menu a:focus { 
color: #ffffff; 
background-color: #330066; 
font-weight: bold; 
font-style: normal; 
font-variant: normal; 
text-decoration: none; 
text-transform: none; 
}

.menu li:hover > a { 
color: #ffffff; 
background-color: #330066; 
font-weight: bold; 
font-style: normal; 
font-variant: normal; 
text-decoration: none; 
text-transform: none; 
}

.menu li ul { 
padding: 2em; 
visibility: hidden; 
position: absolute; 
top: -2em; 
left: 12em; 
background-color: transparent; 
}

.menu li:hover > ul { 
visibility: visible; 
}

.menu ul a:hover ul ul { 
visibility: hidden; 
}

.menu ul a:hover ul a:hover ul ul { 
visibility: hidden; 
}

.menu ul a:hover ul a:hover ul a:hover ul ul { 
visibility: hidden; 
}

.menu ul a:hover ul { 
visibility: visible; 
}

.menu ul a:hover ul a:hover ul { 
visibility: visible; 
}

.menu ul a:hover ul a:hover ul a:hover ul { 
visibility: visible; 
}

.menu ul a:hover ul a:hover ul a:hover ul a:hover ul { 
visibility: visible; 
}

Het XHTML script:

Code:
	<div id="menu" class="menu">


	<ul>


	<li><a href="link.php">xxxxx</a></li>
	<li><a href="link.php">xxxxx</a></li>
	<li><a href=""><b>»</b>xxxxx</a>

		<ul>
		<li><a href="link.php">xxxxx</a></li>
		<li><a href="link.php">xxxxx</a></li>
		<li><a href="link.php">xxxxx</a></li>

		</ul>
	</li>


	<li><a href=""><b>»</b>xxxxx</a>
	<ul>
	<li><a href="link.php">xxxxxn</a></li>
	<li><a href="link.php">xxxxx</a></li>
	<li><a href="link.php">xxxxx</a></li>
	<li><a href=""><b>»</b>xxxxx</a>
		<ul>
		<li><a href="link.php">xxxxx</a></li>
		<li><a href="link.php" target="_blank">xxxxx</a></li></ul></li>
		</ul>
	</li>

	<li><a href=""><b>»</b>xxxxx</a>
		<ul>
		<li><a href="link.php">xxxxx</a></li>
		<li><a href="link.php">xxxxx</a></li>
		</ul>
	</li>

	<li><a href=""><b>»</b>xxxxx</a>
		<ul>
		<li><a href="link.php">xxxxxt</a></li>
		<li><a href="link.php">xxxxx</a></li>
		<li><a href="link.php">xxxxx</a></li>
		</ul>
	</li>

	<li><a href=""><b>»</b>xxxxx</a>
		<ul>
		<li><a href="link.php">xxxxx</a></li>
		<li><a href=""><b>»</b>xxxxx</a>
			<ul>
			<li><a href="link.php">xxxxx</a></li>
			<li><a href="link.php">xxxxx</a></li>
			</ul>
		</li>
		<li><a href=""><b>»</b>xxxxx</a>
			<ul>
			<li><a href="link.php">xxxxx</a></li>
			<li><a href="link.php">xxxxx</a></li>
			</ul>
		</li>
			<li><a href="link.php">xxxxx</a></li>
		</ul>
	</li>

	<li><a href=""><b>»</b>xxxxxx</a>
		<ul>
		<li><a href="link.php">xxxxx</a></li>
		<li><a href="link.php">xxxxxr</a></li>
		<li><a href="link.php">xxxxx</a></li>
		<li><a href="link.php">xxxxx</a></li>
		</ul>
	</li>

	<li><a href="link.php">xxxxx</a></li>
	<li><a href="link.php">xxxxx</a></li>
	<li><a href="link.php">xxxxx</a></li>
	</ul>

	</div>
Wie kan mij helpen? Alvast bedankt!
 
Laatst bewerkt:
Ik heb het .htc bestandje upgeload in dezelfde map waar de html files en css files staan.

Ik heb in de body van de CSS dit geplaatst:

Code:
body { behavior: url("csshover3.htc");

Maar nog steeds werkt het niet in IE6?
 
Ik denk dat ik 't werkend heb. In de css zit twee keer de selector > Die kent IE 6 ook niet. Als dat is opgelost, blijken de sub-sub-menu's te vroeg te openen.
Bij mij werkt het volgende:
Code:
	<!--[if IE 6]>
		<style type="text/css">
		.menu li:hover a { 
		color: #ffffff; 
		background-color: #330066; 
		font-weight: bold; 
		font-style: normal; 
		font-variant: normal; 
		text-decoration: none; 
		text-transform: none; 
		}
		.menu li:hover ul { 
		visibility: visible; 
		}
		.menu li:hover ul ul {          /* Deze en die hieronder zijn nodig om te */
		visibility: hidden;               /* voorkomen dat de sub-sub-menu's te snel */
		}                                          /* openen in IE 6 */
		.menu li:hover li:hover ul {
		visibility: visible;
		}
		</style>
	<![endif]-->
Ik weet niet hoeveel je van css en zo weet, dus voor de zekerheid even: dit wordt alleen door Internet Explorer 6 gelezen. Je kunt het in 'n aparte stylesheet zetten op dezelfde manier als je 'n gewoon css-bestand koppelt aan je html.
Het moet ná het gewone css-bestand komen, zodat het de inhoud daarvan overruled.

Edit: het kan ook in de html-pagina zelf. Omdat het tussen <!-- en --> staat is het volkomen valid en wordt door alle browsers, behalve IE, genegeerd.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan