Mon menu déroulant décale les autres éléments

Bonjour à tous,
je me permet de poster mon problème n'ayant pas trouvé de solutions et de réponses dans le forum.

J'ai un menu déroulant de la forme suivante :

<ul id="menutop">
<li><a href="">Menu</a>
    <ul class="sousMenu">
          <li><a href="">SousMenu</a></li>
    </ul>
</li>
</ul>

Le problème présenté est que lorsque l'on passe le curseur sur le lien "Menu", le menu se déroule correctement mais il décale le reste des éléments qui suivent, et j'aimerais donc qu'il ne les décale pas et s'affiche AU DESSUS de ceux-ci. Sous IE cela fonctionne très bien, c'est seulement sous Mozilla que cela fonctionne mal.

Voici les propriétés principales CSS:

#menuTOP {
	list-style-type: none;
	padding: 0; margin: 0;
	line-height: 21px;
}

#menuTOP li {  
	float: left;
	margin: 0;padding-left: 5px;padding-right: 5px;
	border: 0;
}

#menuTOP li a,#menuTOP li a:visited
{
	display: block;
	color: #605E40;
	margin: 0;
	padding: 0;
	text-decoration: none;
}

#menuTOP li a:hover
{
	color: #d98644;
}

#menuTOP .sousMenu
{
	display: none;
	position: relative;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0; 
	height: auto;
}				   

#menuTOP .sousMenu li
{
	float: none;
	padding: 0; margin: 0;
	border: 0;
	width: 170px; height: auto
}
.sousMenu li a:link, .sousMenu li a:visited
{
	display: block;
	color: #000;
	margin: 0; padding: 0;
	border: 0;
	text-decoration: none; 
	width: 170px; height: auto;
	border-left: 1px solid #e3e1c8;
	border-right: 1px solid #e3e1c8;
	border-bottom: 1px solid #e3e1c8;
	background-color: #faf8eb;
	
}

#menuTOP .sousMenu li a:hover
{
	background-color: #fbfaf3;
	color: #f79b2e
}

#menuTOP li:hover > .sousMenu { display: block;}

Petit screen pour mieux comprendre :

Menu sans survol
http://www.musculazone.com/aroh//upload/normal.JPG

Menu survolé sous IE (tout est ok)
http://www.musculazone.com/aroh//upload/ie.JPG

Menu survolé sous Mozilla (ça foire)
http://www.musculazone.com/aroh//upload/mozilla.JPG

Merci à vous pour vos éventuelles réponses.

bonjour,

remarques sur le code présenté.
dans le html :<ul id="menutop">
dans le css :#menuTOP {

Il est préferable de conservé la casse .

ensuite , on positionne généralement en absolue les sous menu , de façon a les superposer au contenu en les sortant du flux.

GC

Bonjour rounet,

+1 pour la position absolue des sous menus.
(gcyrillus le code html du site est en rapport avec les déclarations css )

Toutefois :
Tu as ce comportement sur tous les "navigateurs principaux" ie Firefox, Opera, Safari...
Ton menu ne fonctionnera pas sous IE6.

Ce comportement devrait être pris en charge par javascript (ou autre) en non pas par css (une petite recherche sur le forum te fournira d'excellents liens)

Autre remarque, les sous menus survolés sont d'une couleur assez similaire avec tes homenav li a, et comme le bloc chevauche ces liens au survol, c'est assez "perturbant", de même, tu fixes une largeur à tes listes dans le code html, cela provoque un saut de ligne pour "les galeries" sous Firefox (pas assez d'espace par rapport à la graisse que tu imposes à ta classe galerie)

Sinon, ils sont vraiment musclés tous ces gens là
Cela m'a fait plaisir de retrouver "l'incroyable Hulk"

Bon courage,
Cordialement,
Sylvain

tout est rentré dans l'ordre, merci beaucoup à vous pour vos réponses !
6l20, j'ai laissé mes menus avec une largeur fixe car sinon ça bug avec les sous menus si je met une largeur "automatique"...

rounet a écrit :
tout est rentré dans l'ordre, merci beaucoup à vous pour vos réponses !
6l20, j'ai laissé mes menus avec une largeur fixe car sinon ça bug avec les sous menus si je met une largeur "automatique"...

Pas de soucis, c'est mieux sous Firefox, Opéra, Safari...
Mais je te reconfirme que le menu ne fonctionne pas sous IE6

Tu devrais également te servir des outils de validation (html et css)
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
Par exemple sont bien utiles

Encore beaucoup de styles dans ton code html

Bon courage

merci bien 6l20, j'ai corrigé pas mal d'erreurs
il me manque désormais plus qu'à trouver une portion de code javascript afin de pouvoir dérouler correctement le menu sous IE6

Si la langue de Shakespeare ne te rebute pas, tu trouveras un menu très correcte à cette adresse :
http://www.htmldog.com/articles/suckerfish/dropdowns/

Bonne intégration.
Cdt,
Sylvain

et bien je te remercie beaucoup
non la langue de shakespeare ne me repousse pas du tout, bien au contraire