28172 sujets

CSS et mise en forme, CSS3

Problème de Sous-menu sous IE

Bonjour à tous,

JE travaille actuellement au developpement d'un site contenant un menu principal horizontal et des sous-menu verticaux qui apparaissent lorsque l'on passe sur le menu principal correspondant.

J'ai créé les CSS et tout fonctionne sur la plupart des navigateurs, sauf IE6. Je voudrais donc régler ce léger désagrément.

Voici le XHTML correspondant au menu:

<div class="moduletable_menu">
	<ul id="sdf" class="menu_menu">
    	<li class="active item1" id="current"><a href="http://www.xxxxxxxxxxx.fr/"><span>Accueil</span></a></li>
        <li class="parent item2"><a href="/edition09"><span>Edition09</span></a>
        	<ul>
            	<li class="item3"><a href="/edition09/programme09"><span>Programme09</span></a></li>
                <li class="item4"><a href="/edition09/interpretes09"><span>Interprètes09</span></a></li>
                <li class="item5"><a href="/edition09/compositeurs09"><span>Compositeurs09</span></a></li>
                <li class="item6"><a href="/edition09/reservation09"><span>Réservation09</span></a></li>
        	</ul>
        </li>
        <li class="parent item7"><a href="/editionprecedente/edition08"><span>Editions précédentes</span></a>
        	<ul>
            	<li class="item8"><a href="/editionprecedente/edition08"><span>Edition08</span></a></li>
                <li class="item9"><a href="/editionprecedente/edition07"><span>Edition07</span></a></li>
                <li class="item10"><a href="/editionprecedente/edition06"><span>Edition06</span></a></li>
            </ul>
        </li>
        <li class="item11"><a href="/atempo"><span>A Tempo</span></a></li>
        <li class="item12"><a href="/liens"><span>Liens</span></a></li>
        <li class="item13"><a href="/partenaires"><span>Partenaires</span></a></li>
    </ul>
</div>


Et le CSS:

ul.menu_menu li {
	display: block;
	height: 30px;
}

ul.menu_menu a {
	position: absolute;
	display: block;
	height: auto;
	max-width: 120px;
	right: 3px;
	bottom: 4px;
	text-align: right;
	color: #FFFFFF;
	text-decoration: none;
	font-size: 14px;
	vertical-align: baseline;
	line-height: 11px;
}

ul.menu_menu a:hover {
	color: #CCCCCC;
}

ul.menu_menu ul {
	position: absolute;
	top: 16px;
	width: 123px;
}

ul.menu_menu ul li {
	position: relative;
	width: 115px;
	height: 20px;
	display: block;
}

ul.menu_menu ul li a {
	font-size: 10px;
	font-family: Verdana, Geneva, sans-serif;
	color: #11253c;
}

ul.menu_menu ul li a:hover {
	color: #09F;
}

.item1 {
	position: absolute;
	left: 162px;
	top: 160px;
	width: 30px;
}

li.item1 a {
	position: absolute;
	width: 30px;
	height: 30px;
	background-image:url(../images/btnAccueil.jpg);
	background-repeat: no-repeat;
	bottom: 0px;
}

li.item1 a span {
	width: 50px;
	height: 10px;
	position: absolute;
	display: block;
	text-align: center;
	left: -10px;
	top: -20px;
	color: #11253c;
	font-size: 9px;
	font-weight: bold;
}

.item2 {
	position: absolute;
	top: 160px;
	left: 206px;
	width: 123px;
	background-color: #32b6f2;
}

.item2 ul, .item7 ul {
	display: block;
	left: -10000px;
	z-index: 100;
	position: absolute;
	width: 400px;
	height: 400px;
}

li.item2:hover ul, li.item7:hover ul {
	position: absolute;
	left: 0px;
	display: block;
	z-index: 100;
	width: 400px;
	height: 400px;
}

li.item2:hover a, li.item7:hover a {
	color: #CCCCCC;
}

li.item2:hover li a, li.item7:hover li a {
	color: #11253c;
}

.item7 {
	position: absolute;
	top: 175px;
	left: 336px;
	width: 123px;
	background-color: #ed55a6;
}

.item11 {
	position: absolute;
	top: 163px;
	left: 466px;
	width: 123px;
	background-color: #b6e85e;
}

.item12 {
	position: absolute;
	top: 190px;
	left: 597px;
	width: 123px;
	background-color: #4000e5;
}

.item13 {
	position: absolute;
	top: 179px;
	left: 728px;
	width: 123px;
	background-color: #e6ba30;
}


Pour l'affichage des sous-menus, j'utilise le changement de position quand on est "hover" sur le menu correspondant.

Par contre, je ne veux pas utiliser de Javascript pour 2 raisons:
- Le site est développé sur Joomla et je ne veux pas trop modifier le code général de la structure
- Le javascript peut être désactivé

Merci par avance pour votre aide
Salut,

Tu n'auras malheureusement pas d'autre choix, car IE6 ne reconnait les pseudo classes que sur l'élément <a>.
Mikachu a écrit :
Salut,

Tu n'auras malheureusement pas d'autre choix, car IE6 ne reconnait les pseudo classes que sur l'élément <a>.


Il faudrait donc que je mette en place l'interaction sur la balise <a> pour que cela marche. Mais comment ecrire en CSS "Affichage de la liste (sous-menu) au passage sur le lien" ?

J'ai cru voir une fois l'utilisation du signe ">" ...
Salut,

Ne cherche pas, c'est un sélecteur d'enfant et non un sélecteur de frère. Et qui plus est, n'est quand même pas géré par IE6 et inférieurs.
Agylus a écrit :
Salut,

Ne cherche pas, c'est un sélecteur d'enfant et non un sélecteur de frère. Et qui plus est, n'est quand même pas géré par IE6 et inférieurs.


Javascript obligatoire?
Sujet clos
Aller à