Discussion :

[dedelex]

Salut ! J'ai eu des problèmes sur mes menus verticaux en css. Au départ, nous étions deux sur le projet et mon collègue s'est occupé du menu déroulant. Problème : il ne fonctionne pas correctement sous IE6/7 mais très bien sous FF. En fait, avec un hover sur une case, les sous catégories apparaissent sur la droite. Une fois dans les sous catégories, on se déplace verticalement de l'une à l'autre et pouf : problème. Les sous catégories disparaissent ! Pourtant en restant sur la gauche des cases, je peux naviguer. Je vous screen ça pour que se soit un peu plus clair..

Si je place la souris sur "organigramme" pour aller sur la case "annuaire", les sous catégories vont disparaitre. Cependant en la plaçant tout a gauche de la case organigramme je pourrais naviguer correctement.

J'ai d'abord pensé à un problème de marges invisibles qui poseraient problème mais après avoir changé les valeurs de à peu prés tout les margin/padding il n'y a eu aucun changement.

Je vous déballe le code (hyper compliqué..)

.menu
{
position:absolute;
top:120px;
left:10px;
width: 180px;
}

.menu, .menu ul
{
list-style-type:none;
padding:0;
margin:0;
width:180px;
}

.menu li.lien
{
display: block ;
background: #c8d9fc;
color: #000000 ;
font: 1em "Trebuchet MS",Arial,sans-serif ;
line-height: 1em ;
text-align: center ;
text-decoration:none;
margin-top:10px;
border: 1px solid #600 ;
}

.menu li.sub
{
display: block ;
background: #c8d9fc;
color: #000000 ;
font: 1em "Trebuchet MS",Arial,sans-serif ;
line-height: 1em ;
text-align: center ;
text-decoration:none;
margin:0px;
border: 1px solid #600 ;
}

.menu li.img
{
text-align:center;
display: block ;
margin-top:10px;
}

.menu li a
{
display:block;
color:#000000;
font-family:arial, sans-serif;
font-size:11px;
line-height:23px;
height:24px;
text-decoration:none;
text-indent:10px;
}

.menu a:hover
{
background: #dee8fb ;
text-decoration: underline ;
}

.menu :hover > a
{
background: #dee8fb ;
text-decoration: underline ;
}

.menu li:hover, .menu li a:hover
{
position:relative;
}

.menu ul, .menu :hover ul ul, .menu :hover ul :hover ul ul, .menu :hover ul :hover ul :hover ul ul, .menu :hover ul :hover ul :hover ul :hover ul ul
{
position:absolute;
left:-9999px;
width:180px;
top:0;
}

.menu :hover ul, .menu :hover ul :hover ul :hover ul, .menu :hover ul :hover ul :hover ul :hover ul :hover ul
{
padding:20px 20px 0px 0;
left:178px;
bottom:auto;
top:-19px;
}

Et le html qui va avec :

<ul class="menu">
<li class="lien"><a href="index.php">Accueil</a></li>
<li class="lien"><a href="#">L'équipe</a>
<ul>
<li class="sub"><a href="organigramme.php">Organigramme</a></li>
<li class="sub"><a href="annuaire.php">Annuaire</a></li>
</ul>
</li>
<li class="lien"><a href="thematiques.php">Thématiques</a></li>
<li class="lien"><a href="#">Equipements</a>
<ul>
<li class="sub"><a href="equip_hum.php">Exploration humaine</a></li>
<li class="sub"><a href="equip_anim.php">Exploration animale</a></li>
<li class="sub"><a href="equip_invitro.php">Exploration in vitro</a></li>
<li class="sub"><a href="equip_devtechno.php">Développement technologique</a></li>
</ul>
</li>
<li class="lien"><a href="#">Publications</a>
<ul>
<li class="sub"><a href="revues.php">Revues</a></li>
<li class="sub"><a href="conferences_invitees.php">Conférences invitées</a></li>
<li class="sub"><a href="communications.php">Communications</a></li>
<li class="sub"><a href="ouvrages.php">Ouvrages</a></li>
<li class="sub"><a href="autres.php">Autres</a></li>
</ul>
</li>
<li class="lien"><a href="#">Enseignement</a>
<ul>
<li class="sub"><a href="IUP_IS.php">I.U.P. IS</a></li>
<li class="sub"><a href="DU_metrologie.php">D.U. Métrologie</a></li>
</ul>
</li>
<li class="lien"><a href="plan_acces.php">Plan d'accès</a></li>
<li><br><a href="login.php"><img src="Documents\Images\admin.png" alt="" title="Partie admin"/></a></li>
</ul>

BONUS : Si vous êtes arrivés là dans mon sujet c'est que vous êtes un courageux ! Alors pour vous, j'ai essayé de recommencer un menu en partant de zéro et encore une fois j'ai eu des problèmes ! Cette fois ci ce n'est plus IE qui pose problème mais FF. En effet, il y a un décalage entre les différents navigateurs, FF affichent les sous catégories plus à gauche que IE. Du coup les sous catégories superposent le menu général. Sauf que... la superposition ne se fait pas dans le bon sens !



Le code CSS/html qui va avec :

ul ul
{
display: none; position: absolute; left: 144px; top: -1px; margin:0px; padding: 0px;
}

li
{
list-style-type: none; position: relative; width: 140px; background: #dee8fb ;
padding: 2px; border: 1px solid #600 ; margin: -1px;
}

li:hover, li.sfhover
{
background: #c8d9fc;
position:relative;
}

li:hover ul.niveau2, li li:hover ul.niveau3, li.sfhover ul.niveau2, li li.sfhover ul.niveau3
{
display: block;
margin-top:2px;
position:absolute;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="menu1.css" />

<script type="text/javascript">
// Fonction destinée à remplacer le "LI:hover" pour IE 6
sfHover = function() {
var sfEls = document.getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover = function() {
this.className = this.className.replace(new RegExp(" sfhover"), "");
this.className += " sfhover";
}
sfEls[i].onmouseout = function() {
this.className = this.className.replace(new RegExp(" sfhover"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<style type="text/css">
li {width: 144px;}
</style>

</head>
<body>
<body>
<ul class="niveau1">
<li>Accueil
</li>

<li>L'équipe
<ul class="niveau2">
<li>Organigramme</li>
<li>Annuaire</li>
</ul>
</li>

<li>Thématiques
</li>

<li>Equipements
<ul class="niveau2">
<li>Exploration humaine</li>
<li>Exploration animale</li>
<li>Exploration In vitro</li>
<li>Développement technologiques</li>
</ul>
</li>

<li>Publications
<ul class="niveau2">
<li>Revues</li>
<li>Conférences invitées</li>
<li>Communications</li>
<li>Ouvrages</li>
<li>Autres</li>
</ul>
</li>

<li>Enseignement
<ul class="niveau2">
<li>I.U.P. IS</li>
<li>D.U. Métrologie</li>
</ul>
</li>

<li>Plan d'accès
</li>

</ul>
</body>
</body>
</html>

L'idéal serait de debugger le premier vu qu'il est déjà intégré au site mais au point où j'en suis, même le second ira très bien et le problème me semble moins compliqué.
Merci de m'avoir lu, en espérant sincèrement pouvoir trouver un réponse ici.. :s

[cedricbaudry.com]

tu dois faire deux css: un pour firefox et un pour ie, renseigne toi sur les commentaires conditionnels