28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je fais en ce moment un menu et j'ai quelque soucis avec IE 6 (je n'ai pas les autres versions...): IE n'aligne pas mon sous-menu verticament en dessous mon item mère mais en dessous dd l'item voisin...

(Item1 )(Item2 )______________(Item1 )(Item2 )
_______(Item11) ...au lieu de.... (Item11)
_______(Item12)______________(Item12)

Le problème est visible ici
Tout ce passe bien avec FF et Opera
Voici mon code html (classique...)

<div id="menu"><ul class="actif">
<li id="item1"><a href="#">Item 1</a><ol>
<li id="item10"><a href="#">Item10</a></li>
<li id="item11"><a href="#">Item11</a></li>
<li id="item14"><a href="#">Item12</a></li></ol></li>
<li id="item2"><a href="#">item 2</a></li>
</ul></div>


Voici le code css

ul, ol {
	list-style-type: none;
}

#menu {
	position: absolute;
	top: 151px;
	width: 800px;
}

#menu li {
	float: left;
	margin-right: 1px;
	white-space: nowrap;
	padding: .2em 0;
}

#menu a {
	padding: .2em 1em;
	background: #6ea202;
	color: #fff;
	font: 1em Arial, Helvetica, sans-serif;
	line-height: 1em !important;
	line-height: 1.2em;
	text-align: center;
	text-decoration: none;
	background-color: orange;
}

#menu a:hover, #menu a:focus, #menu a:active {
	background-color: #be0000;
}

#menu ol {
	display: block;
	position: absolute;
	top: 1.6em;
	padding: 4px;
	background: #6ea202;
	border: 1px solid #fff;
}

#menu ol li {
	float: none;
	width: auto !important;
	width: 1em;
	padding: 0;
}

#menu ol a {
	display: block;
	text-align: left;
	line-height: 1em;
}


Je m'en remets à vous
Merci pour vos réponses
Modifié par djaps (20 May 2008 - 19:02)