Bonjour,


J'ai testé le site avec différents navigateurs et je me suis aperçu que les fenêtres de mon menu déroulant que j'avais créées avec un effet de transparence et qui se colorent lorsqu'elles s'ouvrent sur le "div"fonctionnent bien [b]SAUF avec Internet explorer[/b] (y compris la dernière version). Y -a-t-il une solution à ce problème, SVP?
Si quelqu'un sait et peut me répondre rapidement, ce serait super sympa car je dois envoyerle site pour lundi matin!!!!
Je n'avais pas du tout pensé à ce problème avant!#-o
Merci d'avance! \:D/

Bonjour Devlop 78

Merci pour le conseil. J'ai résolu mon problème; C'est super!
=D> et @+!

Regarde la propriété CSS "position". N'oublie après lecture qu'un noeud HTML en position absolue l'est par rapport à un autre, qui doit alors être défini en position relative (sinon il le sera par rapport à body).

Je travaille sur un site depuis plusieurs semaines et je rencontre, au moment de pratiquement l'avoir fini, un problème que je ne réussis pas à résoudre seul. Pourriez-vous m'aider SVP?
Voilà: J'ai créé un menu déroulant en HTML et CSS (pas droit au javascript). Quand les sous-menus s'affichent (pour l'instant, j'ai juste mis des tests), ils font descendre le "div" qui se trouve dessous au lieu de s'afficher par-dessus. Que dois-je faire pour corriger ce défaut?
Voici mon code:
HTML
[code]<ul class="menuDeroulant">

<li><a href="#" class="selectPrincipal">Accueil</a>
<ul class="sousMenu">
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
</ul>
</li>

<li><a href="Histoire-1.html">Histoire</a>
<ul class="sousMenu">
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
</ul>
</li>

<li><a href="Fetes-1.html">Fêtes, jeux et divertissements</a>
<ul class="sousMenu">
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
</ul>
</li>

<li><a href="Masques-1.html">Les masques</a>
<ul class="sousMenu">
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
</ul>
</li>

<li><a href="Galerie.html">Galerie Photo</a>
<ul class="sousMenu">
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
</ul>
</li>

</ul>
[/code]


CSS[code]menuDeroulant {
width: 900px;
height: 21px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}

.menuDeroulant li {
float: left;
width: 150px;
margin-left: 3%;
-moz-box-shadow:0 0 1px #FFF;
-webkit-box-shadow:0 0 1px #FFF;
box-shadow:0 0 1px #FFF;
}

.menuDeroulant li a:link, .menuDeroulant li a:visited {
display: block;
background:rgba(173, 182, 199, 0.5);
border:1px solid #3a79cf;
color:#3a79cf;
border-top-color:#3a79cf;
margin: 0;
padding: 4px 8px;
text-decoration:none;
}

.menuDeroulant li a:hover {
background:rgba(255, 255, 255, 0.8);
color:#3a79cf;
}

.menuDeroulant .sousMenu {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}

.menuDeroulant .sousMenu li {
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border:1px dashed #3a79cf;
background:rgba(58, 121, 207, 0.5);
margin-top: 2%;
}

.menuDeroulant .sousMenu li a:link, .menuDeroulant .sousMenu li a:visited {
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: transparent;
}
.menuDeroulant .sousMenu li a:hover {
background:rgba(255, 255, 255, 0.8);
color:#3a79cf;
}

.menuDeroulant li:hover > .sousMenu {
display: block;
}

.menuDeroulant li a.selectPrincipal {
color:#3a79cf;
background:rgba(255, 255, 255, 0.8);
}
[/code]

Merci si vous pouvez m'aider!