Aller au contenu

[Resolu sous Opr 9] Problème d'affichage d'un menu


cedricpc

Messages recommandés

Bonsoir,

J'ai un tit problème d'affichage avec un menu fait en CSS. Le menu n'est pas un simple menu (une barre quoi), c'est un menu qui peut faire des sous menus (et ce, à ma plus grande joie, :haine: de façon quasi-infini). Bon rien de très rare, ça se trouve facilement avec google. Aussi, il est fixé au dessus de la page mais le problème, sous Opera 8.x, les sous menus ne s'affichent (correctement) que si la page est completement en haut.

Voici le code css :

ul#menu {
position: absolute; top: 0; left: 0;
border: 1px solid #999999; border-width: 0 0 1px 0;
}
html>body ul#menu { position: fixed; }

ul#menu, ul#menu ul {
margin: 0; padding: 0;
}

ul#menu li {
text-align: center; width: 100px;
float: left; border-right: 1px solid #999999;
background-color: #E0E2EB;
}

ul#menu ul {
position: absolute; top: 100%; left: -1px;
border: 1px solid #999999; border-right: 0;
margin-top: 1px; background-color: #E0E2EB;
}
html>body ul#menu ul { margin-top: 0; }

ul#menu ul ul {
top: 0;
left: 99px;
}
html>body ul#menu ul ul { left: 100px; }

ul#menu a, ul#menu ul {
display: block;	width: 100%;
color: #000000; text-decoration: none;
background-color: #E0E2EB;
}

ul#menu a:hover {
color: #000000; text-decoration: none;
background-color: #BBBBCC;
}

ul#menu li { position: relative; display: inline; }
html>body ul#menu li { display: block; }
ul#menu li ul { display:none; }	
ul#menu li:hover>ul { display:block; }

Vous pouvez aussi voir le résultat ici.

Le problème proviens surement d'ici :

ul#menu ul {
position: absolute; top: 100%; left: -1px;
border: 1px solid #999999; border-right: 0;
margin-top: 1px; background-color: #E0E2EB;
}

car si j'enleve le "position", cette fois ça marche partout (en haut, en bas...) mais les sous menus ne se placent plus correctement et les bordures partent en freestyle complet (pour rester poli :transpi:) !

Si quelqu'un a une idée pour résoudre ça svp ?

Merci par avance.

[Edit : Le "float: left;" de ul#menu a été supprimé. (Inutile)]

Lien vers le commentaire
Partager sur d’autres sites

  • 1 mois après...
  • 4 semaines après...

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

×
×
  • Créer...