Discussion :

[M4kn4sh]

Bonsoir,

Je dois faire un menu horizontal sur 3 niveaux avec WordPress. Le hic, c'est que j'ai un peu de mal à le faire car ils doivent tous être horizontaux, y compris les sous-menus.
Ce que je trouve sur le net, c'est toujours le menu principal en horizontal et le reste en vertical, mais ça ne m'intéresse pas...

En gros, il me faut ça mais sur 3 niveaux au lieu de 2 : http://www.cssplay.co.uk/menus/drop_line.html

J'ai bien compris que WordPress ne permettait pas de le faire facilement et qu'il faut tout faire côté CSS...
J'ai donc recherché de longues heures pour au final me rendre compte qu'il fallait faire ça :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.main-navigation li li {
float: left;
}
.main-navigation ul ul {
width: 900px;
}

Source : http://wordpress.org/support/topic/t...zontal-submenu

C'est sympa pour 2 niveaux... Mais pas pour 3 ! De plus le menu est décalé à droite...
Afin de faire fonctionner ceci sur 3 niveaux, j'ai pondu ça :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.nav-menu li li {
	float: left;
	margin: 0;
}
.nav-menu li ul {
	width: 900px;
}
.nav-menu li li li {
	float: left;
}
.nav-menu li ul ul {
	top: 100%;
	left: 0;
}

Je ne suis pas le maître du CSS, mais bon, j'ai bidouillé ce code qui fonctionne à part que j'ai un décalage à chaque fois vers la droite comme le montre ma photo.

Je débute en WordPress, enfin j'en avais déjà fait du basique mais il y a longtemps...

Donc voilà, j'attends vos réponses pour savoir si vous avez soit une solution plus propre et plus simple, soit une solution à ma question : Comment puis-je centrer à l'écran TOUS les menus?

Merci d'avance

[M4kn4sh]

Personne ne sait comment faire? Ca me semble assez courant pourtant...
Bon là j'ai laissé tombé le template par défaut Twenty Twelve, je suis passé à Twenty Ten qui me semble plus simple à manipuler pour ce que je dois faire.

J'ai modifié mon CSS du coup, et j'ai ça :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* Ajout pour le menu horizontal */
#menu-menu-haut > li > ul {
	display: none;
	left: 0;
	margin-top: 3px;
	padding-bottom: 40px;
	position: absolute;
	text-align: center;
	width: 100%;
	z-index: 99;
}
#menu-menu-haut > li > ul li {
	display: inline-block;
	float: none;
	position: relative;
	font-weight: normal;
	height: 120px;
	line-height: 30px;
	margin: 1%;
	text-transform: none;
	width: 22%;
}

Dites-moi que vous avez une solution? Ca commence à se faire pressant... Merci d'avance