Texte pas assez long menus css

Bonjour,
Une question, j'ai un menu css horizontal plus sous-menus et des images de fonds, le probleme est que si on passe la souris sur le menu principale le sous-menu s'affiche mais ne reste pas fixe car mon texte du menu principale est pas assez long, par contre si je le rallonge le sous-menu reste fixe pourquoi?
Idéalement j'aimerais qu'il soit fixe quelque soit la taille de mon premier item....
J'espere que vous comprenez ma question, merci d'avance:)

Bonjour,

Première remarque : un menu déroulant se fait de préférence en JavaScript, surtout quand on débute.

Seconde remarque, de ma voyante cette fois : elle se plaint que votre code soit si bien caché qu'elle ne puisse diviner le problème...

Bonjour et bienvenue,

aurais-tu une page en ligne pour qu'on puisse se rendre compte du problème ou bien doit-on recourir à la divination et à l'interprétation des arcanes ? (mon collègue termine ce midi le poulet rôti entier qu'il a acheté hier ou avant hier, je vais lui demander de garder les restes pour ta question)

Et de quel(s) navigateur(s) parles-tu ? IE, Chrome, Opera, Safari, Firefox, plusieurs ? Quelle version d'IE le cas échéant ?

La seule piste que je puisse te donner en l'absence de page en ligne, c'est que les items principaux (items de niveau 1, horizontaux) doivent être jointifs au pixel près avec leur sous-menu sinon la souris passe dans une zone hors menu qui déclenche la fermeture. Plus de contenu égale plus grande hauteur. Pour visualiser s'il y a souci ou pas, background-color: blue; et background-color: hotpink; sont tes amis.

edit: et voilà, grillé.
"diviner" c'est joli comme mix entre deviner et divination (mais c'est un terme anglais )
Modifié par Felipe (18 Mar 2011 - 08:24)

Bonjour,

Merci pour vos réactions, premièrement je n'ai pas l'intention de faire un menu en javascript, mais merci Marie pour ton imagination fertile.....

Pour le navigateur c'est IE8, je vais travailler ta suggestion Felipe, mais tu m'as compris:)

Voici ci-joint le code css, si vous y voyez l'erreur par rapport à mon problème:

.bg {background: url(images/button4.gif);}
.menu {padding:0; margin:0; height:31px; background:#fff; position:relative; font-family:arial, verdana, sans-serif; list-style-type:none; text-align:center;
}
.menu li.top { float:left;  width:131px; text-align:center;
}
.menu li a.top_link {
 float:left; height:31px; width:131px; line-height:26px; color:#fff;  text-decoration:none; font-size:12px; font-weight:bold; padding:0 0 0 10px; cursor:pointer; background: url(images/Bottom1R.png) no-repeat; text-align:center;
}
.menu li a.top_link span {float:left; font-weight:bold;  padding:0 20px 0 10px; height:31px;}
.menu li a.top_link span.down {float:left;  height:31px;}
.menu li a.top_link:hover {color:#06D2D8; background: url(images/Bottom2R.png) no-repeat; width:131px; float:left; height:31px; padding:0 0 0 10px; font-size:12px; font-weight:bold; line-height:26px; text-align:center;
}
.menu li a.top_link:hover span {display: block;}
.menu li a.top_link:hover span.down {display: block;}

.menu li:hover > a.top_link {display: block;}
.menu li:hover > a.top_link span { display: block;}
.menu li:hover > a.top_link span.down {display: block;}

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.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; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto; }
.menu :hover ul.sub li {display:block; height:31px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:31px; width:131px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;background: url(images/Sub1R.png) no-repeat;}
.menu :hover ul.sub li a.fly {background:#fff;}
.menu :hover ul.sub li a:hover {background:#999999; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;}