Menu déroulant horizontal au lieu de vertical

Problème avec un menu déroulant full css

ul#menu a:link, ul#menu a:visited {
font-size: 18px;
text-decoration: none;
color: #fff;
}
ul#menu a {
display: block;
padding: 8px 25px 0 20px;
}
ul#menu li {
display: inline;
margin: 0;
padding: 0;
float: left;
}
ul#menu {
list-style-type: none;
margin: 0 auto 0 auto;
width: 800px;
padding: 0;
z-index: 100;
}
/**/
ul#menu li:hover > .sousMenu {
display: block;
}
.sousMenu {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
float: none;
}
.sousMenu li {
float: none;
margin: 0;
padding: 0;
border: 0;
}
.sousMenu li a:link, .sousMenu li a:visited {
display: block;
color: #000;
margin: 0;
border: 0;
text-decoration: none;
}

<ul id="menu">
    <li>
        <a href="" title="Home" id="lien1" onmouseover="javascript:montre('sous_menu1');">
            <span>What's New</span>
        </a>        

        <ul class="sousMenu">
            <li><a href="#">castor</a></li>
            <li><a href="#">aligator</a></li>
            <li><a href="#">musclor</a></li>
        </ul>
        
    </li>
    
    <li>
        <a href="" title="Product" id="lien2">
            <span>Product</span>
        </a>
    </li>
</ul>

Deux problèmes :
* lorsque je survole le premier titre pour dérouler le menu déroulant, celui-ci s'affiche horizontalement et non pas verticalement
* une fois le sous-menu affiché, il décale tous les autres menus sur la droite
Modifié par koskoz (20 May 2007 - 20:10)

J'ai beau mettre les deux "block", ça ne change strictement rien

Bonjour,
tu as pas mal d'oubli dans ton code et quelques propriété superflues dans tes style CSS.
Tu ne dois pas oublier de mettre l'ID au sous menu pour que la fonction
puisse agir dessus.
Pas la peine de répéter margin:0 et padding:0 a tous tes sélecteurs,
les rassembler plutôt comme ceci (* {margin:0; padding:0}) mais cette méthode ne doit pas être obligatoire.
La priopriété z-index ne s'applique qu'aux élément positionnés (abolsue, relative, fixed)
Pour que le sous menu n'ait pas de repercution sur l'affichage de ce qu'il l'entoure, tu dois le mettre en position:absolute, le float:none est alors inutile puisque la position:absolute fait passer la valeur de float à none.
Pour que tons script fonctionne commences par mettre le display:none du sous menu en style en-ligne mais il y a des solution pour éviter cela.
Faire une recherche sur ce forum

Donc essayes avec ça

* {margin:0; padding:0}
ul#menu {
	list-style: none;
	margin: 0 auto;
	width: 800px;
	}
ul#menu li {float: left;}
ul#menu a {
	display: block;
	padding: 8px 25px 0 20px;
	}
ul#menu a:link, ul#menu a:visited {
	font-size: 18px;
	text-decoration: none;
	}
ul#menu li:hover > .sousMenu {
	display: block;
	}
.sousMenu {
	list-style: none;
	position:absolute;
	}
.sousMenu li {float: none;}
.sousMenu li a:link, .sousMenu li a:visited {
	display: block;
	color: #000;
	text-decoration: none;
	}

<ul id="menu">
	<li><a href="" id="lien1" onmouseover="javascript:montre('sous_menu1');"><span>What's New</span></a>
		<ul class="sousMenu" id="sous_menu1" style="display:none">
			<li><a href="#">castor</a></li>
			<li><a href="#">aligator</a></li>
			<li><a href="#">musclor</a></li>
		</ul>
	</li>
	<li><a href="" title="Product" id="lien2"><span>Product</span></a></li>
</ul>

Modifié par Hermann (20 May 2007 - 18:07)

Un petit oublie:
pour afficher ton sous menu verticalement tu dois déclarer ceci:

ul#menu .sousMenu li {float: none;}

Pour augmenter la spécificité (priorité) du <li> et pour que le float:none
prenne le pas sur le float:left déclaré plus haut.
Un class a toujours une spécificité infèrieur à l'ID.
Modifié par Hermann (20 May 2007 - 18:15)

As-tu un exemple en ligne ? Je pense que ça permettrait d'éclaircir le problème.

Julien Royer a écrit :
Hello,
Mauvaise idée, car le fait d'appliquer ces propriétés aux contrôles de formulaires donne des résultats très peu homogènes sur les différents
navigateurs.

Ok mais jamais remarqué ce genre de problème personnellement, à quel
niveau cela pause problème exactement?
Sinon Xelnaga tu peux le déclarer seulement au niveau des listes:

ul {padding:0; margin:0}

Hermann a écrit :
Ok mais jamais remarqué ce genre de problème personnellement, à quel niveau cela pause problème exactement?

Le style des contrôles de formulaires est très difficile (voir par exemple l'article de Roger Johansson à ce propos). L'idéal est donc de le faire le moins possible, et le problème du sélecteur universel est que ça va t'obliger à le faire puisque ça modifie les propriétés par défaut.

D'accord merci à toi.
Disons que j'ai pris l'habitude d'utiliser le selecteur universel depuis un
moment, c'était commode pour le débutant que j'étais mais là je crois bien
qui va falloir que j'essaye de m'en passer

Ah !
Ca merde à fond sous IE 7

Les sous menus sont totalement décalé sur la droite et à la même hauteur que les titres.
La seule solution qui me vient à l'idée est les marges négatives.

Quelque chose d'autre ?

Je remonte ce sujet puisque je n'ai toujours pas trouvé de solution pour le décallage sur la droite de mon sous menu sous IE.

L'exemple en ligne.

Toujours personne ?