Menu horizontal css + sous menu

Version imprimable

Bonjour a tous,

J'ai un soucis concernant la mise en place de mon menu.
Lorsque que je survol mon élément de menu, mon sous menu ne se met pas correctement.

Voici ce que mon code donne :
http://www.easy-upload.net/fichiers/...1272517530.jpg

Mon css est le suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
ul { list-style: none; }
 
#nav { float: left; width: 100%; overflow: hidden; position: relative; margin: 30px 0 10px 0; border-top: 2px #eee solid; border-bottom: 2px #eee solid; padding: 20px 0 16px; }
#nav ul { clear: left; float: left; margin: 0; padding: 0; position: relative; left: 50%; text-align: center; }
#nav ul li { float: left; list-style: none; margin: 0; padding :0; position: relative; right: 50%; }
#nav ul li a { margin: 0 0 0 1px; padding: 0; font-size: 20px; color: #555; text-transform: uppercase; }
#nav ul li a:hover { color: #F34607; }
#nav li span { padding: 20px; color: #555; font-size: 20px; }
 
#nav ul li ul {display:none;}
#nav ul li:hover ul {display:block; }
#nav li:hover ul li {float:none;  }

Merci bcp !

cordialement
Arsenik

25/07/2012, 18h44
NoSmoking

Bonjour,
il serait intéressant de posséder également le contexte, à savoir donc le code HTML de ton menu.

La galerie CSS > Barres de navigation / Menus horizontaux

Citation:

Envoyé par NoSmoking

Bonjour,
il serait intéressant de posséder également le contexte, à savoir donc le code HTML de ton menu.

La galerie CSS > Barres de navigation / Menus horizontaux

Bonjour,

oups.. de fait ! le voici ;-)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
<ul id="nav-pages">
    <li><a href="index.php">Accueil</a><span>~</span></li>
    <li><a href="#">Galerie</a>
        <ul>
            <li><a href="#">Galerie 1</a></li>
            <li><a href="#">Galerie 2</a></li>
            <li><a href="#">Galerie 2</a></li>
        </ul>
    <span>~</span></li>
    <li><a href="contact.php">Contact</a><span>~</span></li>
    <li><a href="connexion.php">Connexion</a></li>
 
</ul>

Merci bp !
Arsenik

26/07/2012, 10h49
Candygirl

Bonjour,

Citation:

Envoyé par arsenik360

Lorsque que je survol mon élément de menu, mon sous menu ne se met pas correctement.

Quel est le rendu que tu souhaites obtenir ? N'y a-t-il aucun menu, dans le lien donné par NoSmoking qui corresponde à ton cas ?
26/07/2012, 20h25
arsenik360

Le soucis que j'ai, c'est que le 1er élément de mon sous menu se trouve au niveau de l'élément que menu principale.
De plus, la "colonne" de sous menu devrait se trouver en dessous.

Je ne sais pas si je suis bien claire :-s

Il faudra donc que en dessous de "Galerie", je trouve une colonne reprennant verticalement mon sous menu :-)
26/07/2012, 23h06
Candygirl

Citation:

Envoyé par arsenik360

Le soucis que j'ai, c'est que le 1er élément de mon sous menu se trouve au niveau de l'élément que menu principale.
[...]

Je ne sais pas si je suis bien claire :-s

Pas vraiment, ta première phrase ne veut rien dire :aie:
Sans compter que ton screen ne correspond pas à ton code :calim2: (id nav-pages dans le code mais #nav dans le css,...)

Citation:

Envoyé par Candygirl

N'y a-t-il aucun menu, dans le lien donné par NoSmoking qui corresponde à ton cas ?
26/07/2012, 23h51
arsenik360

j'avoue que ma phrase n'est pas claire.... :roll:

Mon menu se trouve dans un fichier php appart. Je fais un include dans la page index. L'include est dans une div id="nav" :-)

Je vais ré expliqué ça en français :-D

Dans le screen que j'ai posté, j'ai un sous menu qui apparait. (bla bla, scssc et ttttt).
Ce sous menu ne se place pas correctement. En effet, le 1er élément de ce sous menu(ici bla bla) se superpose à "galerie".
J'aimerai que ce sous-menu se place en dessous de "galerie".

J'ai bien été voir les exemples de menu en css ms cette erreur me rend dingue :-/

merci :-P