28172 sujets

CSS et mise en forme, CSS3

Encore un problème de menu déroulant sous Internet Explorer

Bonjour,

Alors voilà, j'vais passer vite fait sur le fait que je suis bloqué depuis un petit bout de temps, mais voilà : je n'arrive pas à faire ou à savoir précisement si ce que j'essaye de faire est faisable ou non.

J'essaye d'obtenir que le <li> et <a> s'adaptent ou s'étirent au <ul> (comme sous firefox), afin d'utiliser des :hover sur les liens, mais IE ne vx rien y entendre.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html{background:#000}
html,body{height:100%}
body{color:#000;font:12px Arial;background:#DDD}
html,body,a,ul,li{margin:0}
table{border-collapse:collapse;empty-cells:show}
table{border:0}
a{color:#000;text-decoration:none;background:transparent}
a:hover{text-decoration:none}

#navigation{height:32px;padding-left:1px;list-style:none;background:#FF0;float:left;position:relative;z-index:2}
#navigation li{padding-right:1px;float:left}
#navigation li a.top{height:32px;color:#FFF;font:11px Arial;text-align:center;cursor:pointer;padding:0 3px;background:#F00;display:block;line-height:31px;float:left;white-space:nowrap}
#navigation li a.top:hover{background:#F60}

#navigation ul{text-align:left;top:-9999px;padding:0 0 7px 0;list-style:none;background:#EEE;float:left;position:absolute;z-index:1;white-space:nowrap}

/* FF */
#navigation li:hover{position:relative;z-index:1}
#navigation :hover ul li{float:none;padding:0}
/* IE6 */
#navigation a:hover{position:relative;z-index:1}
#navigation a:hover ul li{float:left}

#navigation :hover ul{left:0;top:32px;border:1px solid #fff;border-width:0 1px 1px;border-color:#fff #ccc #aaa #eee}
#navigation :hover ul li a{height:29px;color:#FFF;font:11px Arial;text-align:left;padding:0 5px;background:#06F;display:block;line-height:28px;white-space:nowrap}
#navigation :hover ul li a:hover{background:#3CF}

/* show next level FF */
#navigation li:hover li:hover > ul{left:-15px;margin-left:100%;top:10px;border:1px solid #fff;border-color:#fff #ccc #aaa #eee}
/* keep further levels hidden FF */
#navigation li:hover > ul ul{position:absolute;left:-9999px;top:-9999px}
/* show next level IE6 */
#navigation a:hover a:hover ul,
#navigation a:hover a:hover a:hover ul{left:100%;top:10px;border:1px solid #fff;border-color:#fff #ccc #aaa #eee}
/* keep further levels hidden IE6 */
#navigation a:hover ul ul,
#navigation a:hover a:hover ul ul{position:absolute;left:-9999px;top:-9999px}
</style>
</head>
<body>
<ul id="navigation">
	<li><a class="top" href="#">Home</a></li>
	<li><a class="top" href="#">Galerie<!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="#">Projet 1 >><!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
				<li><a href="#">plzdp</a></li>
				<li><a href="#">photo #2</a></li>
				<li><a href="#">photo #1</a></li>
			</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#">Sample - photo</a></li>
			<li><a href="#">Sample - noscript option ok saok saok asok asok asok asok saok asok saok >><!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
				<li><a href="#">plzdp</a></li>
				<li><a href="#">photo #2</a></li>
				<li><a href="#">photo #1</a></li>
			</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#">Sample</a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a class="top" href="#">BTN 3<!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="#">Projet 4012112 >><!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
				<li><a href="#">#4 pp</a></li>
				<li><a href="#">#3 pldpalplad</a></li>
				<li><a href="#">#2 pklpldpal</a></li>
				<li><a href="#">#1 machin</a></li>
			</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a class="top" href="#">Contact</a></li>
	<li><a class="top" href="#">blabla</a></li>
	<li><a class="top" href="#">BTN 6</a></li>
	<li><a class="top" href="#">super BTN 7</a></li>
</ul>
</body>
</html>



j'ai mis des couleurs pour l'exemple, mais normalement j'utilise des images et j'ai aussi enlevé toutes les informations width:auto ou width:100% qui n'avaient à priori aucun effet .... pt être que j'étais pas loin, mais n'ai pas réussit à finaliser le rendu.

merci de votre aide!!

++
seb
Modifié par Artefacus (28 Nov 2008 - 11:31)
Sujet clos
Aller à