css menu

Door Robin de Vries op 04-11-2007 19:39

285 views

Ik ben een nieuw menu aan het maken, maar internet explorer werkt niet echt mee.(had niet veel anders verwacht) Als ik in firefox over "database" heen ga krijg in een sub menu, terwijl internet explorer (6 en 7 thanks multi ie) ik bij een mouseover niks krijg. Hier mijn voorbeeld:


<style type="text/css">
#menubalk ul li ul{
display:none;
}
#menubalk ul li:hover ul{
display:block;
}


</style>
<div id="menubalk">
	<ul id="menu">
    	<li><a href="#">Home</a></li>
        <li><a href="#">Database</a>
        	<ul id="sub_menu">
            	<li><a href="#">Tools</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Crew</a></li>
			</ul>
		</li>
        <li><a href="#">Login</a></li>
	</ul>
</div>

De lay-out is nog niet mooi maar het gaat om het principe! (en het is niet xhtml 1.0)

Weet iemand css-code die ook in internet explorer werkt?

alvast bedankt, MVG Robin de Vries

Jan Koehoorn

04-11-2007 20:24

IE6 ondersteunt de pseudo class :hover alleen voor <a> tags. Daar zul je dus een behavior moeten gebruiken en een conditional comment.

De laatste zet je in je head sectie en ziet er zo uit:


	<!--[if lte IE 6]>
		<style type="text/css" media="screen">
			body {
				behavior: url(csshover.htc);
			}
		</style>
	<![endif]-->

Verder heb je dus het bestand csshover.htc nodig. Bij staat hij in dezelfde map.

Robin de Vries

04-11-2007 20:40

Ok, mooi voor IE 6 opgelost maar ie7 wil nog niet. en ervan maken:


<!--[if lte IE 7]>
        <style type="text/css" media="screen">
            body {
                behavior: url(csshover.htc);
            }
        </style>
    <![endif]-->

Werkt helaas niet. Heb je hier ook nog een oplossing voor?

MVG Robin de Vries

Robin de Vries

05-11-2007 08:17

OK, gevonden dus hier voor anderen:
// de if-lus is niet nodig in de code want die zit al in de csshover.htc

        
<style type="text/css" media="screen">
            body {
                behavior: url(csshover.htc);
            }
        </style>

en hier de rest
csshover.htc


// lijn 34
	if(!/MSIE (5|6|7)/.test(navigator.userAgent)) return;

Bedankt, MVG Robin de Vries

Reageren

Inloggen om te reageren