Transparance non désirée

Bonjour

J'ai un appli avec un menu vertival a 2 niveaux se chevauchant pour des raisons de place mais j'ai un pb, sous IE le 2ème niveau est transparent ce qui fait qu'il devient illisible. Qu'elle est l'astuce qui permet d'éviter ceci.

Je joins ci dessous la feuille de style correspondante:

ul#menulist li ul{ display:none; }        /*sous-menu caché*/

ul#menulist li:hover>ul{ display:block; } /*sous-menu affiché*/

ul#menulist {
	font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serig;
	font-size: 10px;
	color: Blue;
	position: static;
	left: 5px;
	margin: 1px;
	z-index: 90;
}
/*forme et fond menu*/
ul#menulist, ul#menulist ul {
	/*border:1px solid #990000;*/
	list-style: none;
	margin: 0;
	padding: 0;
	width: 190px;
	background-color: #CCE1E1;
}
/*forme et fond sous-menu*/
ul#menulist ul{
	border: 1px solid #ECA688;
	z-index: 95;
	position: absolute;
	top: 2px;
	left: 100px;
	width: 280px;
	background-color: #DAF3E4;
}

ul#menulist li{
  position:relative;
  margin:0px;
  padding:0px;
 display:inline;
}

ul#menulist a{
  display:block;
  width:100%;
  text-decoration: none;
  text-indent: 1em;
  width: 190px;
  padding: 0px;
  color: Blue;
  text-decoration: none;
}
ul#menulist ul a{
  display:block;
  width:100%;
  text-decoration: none;
  text-indent: 1em;
  width: 280px;
  padding: 0px;
}
ul#menulist li:hover, ul#menulist li a:hover {
	color: #FF6347;
	background-color: #FFECCE;
}

Merci d'avance

Bonjour,

Peut-on voir la page en ligne? Avec juste un peu de code CSS, difficile de dire quoi que ce soit.

Ou alors juste ceci: tu as des sélecteurs CSS qui ne seront pas compris par Internet Explorer avant sa version 7. Notamment:

ul#menulist [#red]li:hover[/#](1) [#red]>[/#](2) ul {}
ul#menulist [#red]li:hover[/#](1)

Légende:
1. IE6 ne comprend pas la pseudo-classe :hover sur les éléments HTML autres que a.
2. IE6 ne comprend pas le sélecteur d'enfants (>).

...

À bien relire ton message, j'ai l'impression que tu as réalisé un menu déroulant en utilisant :hover pour l'affichage des sous-menu. Si c'est bien le cas, tu as deux problèmes:
1. Problème d'accessibilité (pour la navigation au clavier, pour les utilisateurs de lecteur d'écran, etc.).
2. Problème de compatibilité: ça ne peut pas marcher dans IE6.

Pour information, les menus déroulants un peu fiables utilisent bien sûr CSS mais aussi et surtout Javascript pour tout ce qui est dynamique (afficher/masquer les sous-menus en fonction des actions de l'utilisateur). Le problème, c'est que les menus en question sont donc un peu plus compliqués à mettre en place. Il est préférable, par exemple, d'avoir une connaissance de base de Javascript pour pouvoir en mettre un en place (même s'il s'agit de reprendre un script existant, il faudra éviter certaines erreurs lors de la mise en place).

D'autres intervenant pourront sans doute t'indiquer un script qui tient la route.
(Nota: de préférence, ne pas utiliser celui proposé actuellement sur Alsacréations. Il est laissé pour archive mais n'est pas vraiment satisfaisant.)

Merci pour ta réponse.

Apparemment le pb sur IE je ne l'ai pas sur tous les PC.
Le script utilisé, je l'ai pompé je ne sais plus où mais je crois que c'est celui utilisé par le site d'alsacréation, ce n'est pas la peine de réinventer la poudre.

// 

function mouseOver() {//alert("mouseOver");
   // pour IE affiche ou masque l'élément <ul> (le 1er) contenu dans l'objet "obj"
    if (document.all) {
        UL = this.getElementsByTagName('ul');
        if (UL.length > 0) {
            sousMenu = UL[0].style;
            if (sousMenu.display == 'none' || sousMenu.display == '') {
                sousMenu.display = 'block';
            }
        }
    }
}

function mouseOut() {//alert("mouseOut");
    //tempo
    for(i=0;i<5000;i++){i=i;}
    // pour IE affiche ou masque l'élément <ul> (le 1er) contenu dans l'objet "obj"
    if (document.all)
       {UL = this.getElementsByTagName('ul');
        if (UL.length > 0) {
            sousMenu = UL[0].style;
            if (sousMenu.display && sousMenu.display != 'none') {
                sousMenu.display = 'none';}
        }
    }
}

function setHover() {
    // affecte une fonction (hover) à tous les éléments <li> de la liste des matériels
    if(document.getElementById("menulist")==undefined){return;}
    LI = document.getElementById("menulist").getElementsByTagName('li');
    nLI = LI.length;
    for (i=0; i < nLI; i++)
        {LI[i].onmouseover = mouseOver;
         LI[i].onmouseout = mouseOut;}
}
   
if (document.all)
    {window.attachEvent("onload", setHover);}
  else
    {window.addEventListener("load", setHover, false);}

pour un menu du type:

<div id="pos" style="margin: 5px">
<ul id="menulist">  <li><a href="#">GE SDMO 3,5KW</a><ul>
  <li><a href="javascript:valider('GE_SDMO','D');">GE_SDMO - null</a></li>
</ul></li>  <li><a href="#">HONDA</a><ul>
  <li><a href="javascript:valider('HONDA','D');">HONDA - HONDA</a></li></ul></div>

</div>
<script type="text/javascript" langage="javascript">
var m_href="?ch=4100&type=";
function valider(code_emat,type)
   {top.location.href="gest_mat"+id+m_href+type+"&code_emat="+code_emat;}
</script>

Désolé mais je ne dispose pas d'un serveur java pour diffuser la page.[/i][/i]

bill a écrit :
ce n'est pas la peine de réinventer la poudre.

Sauf quand la poudre est mouillée.

bill a écrit :
Apparemment le pb sur IE je ne l'ai pas sur tous les PC.

Ça ne serait pas plutôt les versions d'Internet Explorer (6 ou 7) qui jouent?

bill a écrit :
Désolé mais je ne dispose pas d'un serveur java pour diffuser la page.

Juste pour dissiper un doute: ton code HTML est bien généré via Java, ou bien il s'agit de la vieille confusion Java/Javascript?
Dans le deuxième cas: Java et Javascript n'ont strictement rien à voir (mis à part un gag marketing historique ), et on n'a pas besoin d'un serveur spécial pour mettre en ligne des pages HTML+CSS+Javascript.

Tous les navigateurs sont en IE6 standardisation oblige et exceptionnellement firefox en cas de pb.
Le générateur de page est du java suivant modèle MCV (séparation code/jsp) et sans applet (interdit)