Menu principal décalé par sous menu

Version imprimable

18/09/2013, 21h00
cccb24

Menu principal décalé par sous menu

Bonjour à tous et à toutes,

je suis face à un léger problème, je suis en train de designer le nouveau menu de mon site web.
Cependant, la largeur du sous menu décale le menu principal lorsque je passe sur books et download, je ne sais pas si tout est bien clair, mais je vous laisse regarder ici: http://lagrotte.be/new/

D'avance merci !
18/09/2013, 21h41
Invité
Bonjour,
il faute mettre :
- le menu niveau 1 en position:relative;,
- les sous-menus en position:absolute;.

N.B. Pourquoi ne pas utiliser QUE des <ul><li> ? :koi:

Enlever aussi font-size:11px; sur le <body>.

=> A voir aussi :
- Un menu déroulant en CSS3
- La galerie CSS : menus
18/09/2013, 21h44
rodolphebrd
Bonjour,

un menu à base de DL-DT-DD comprenant des UL-LI n'est pas la meilleure façon de procéder.
1. Partez d'une liste non-ordonnée;
2. définissez des largeurs aux items;
3. lisez les ressources du forum: http://css.developpez.com/galerie/
[edit] le bug : j'étais sûr d'avoir posté avant toi, Jêrome!!
18/09/2013, 21h55
cccb24

Merci à tous les deux pour vos réponses,

qu'entendez vous par le menu niveau 1 ? c'est bien "photographers,books,etc" ? Si oui j'ai effectué la modif et çà ne fonctionne pas...

Concernant les dl dd dt, j'ai suivi un tutoriel. Étant très loin de maîtriser le code, et celui-ci étant loin de ma profession comme vous pouvez le voir j'ai suivi le tuto qui était à mes yeux le plus simple.

Encore merci !

Menu et sous-menu....

Avec comme base.

Code:

1
2
3
4
5
6
7
8
9
10
11
<ul id="menu">
  <li><a href="#">Lorem</a></li>
  <li><a href="#">Sed</a></li>
  <li><a href="#">Ut labore</a>
    <ul>
      <li> <a href="#">dfgdfg</a></li>
      <li><a href="#">sdfsd</a></li>
    </ul>
  </li>
  <li><a href="#">szffsff</a></li>
</ul>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#menu {
	list-style: none;
}
#menu>li {
	display: inline-block;
  position: relative;
}
#menu ul {
	list-style:none;
	position: absolute;
	top: 1.3em;
	left: -2.5em;
	display: none;
  padding-top: 0.2em;
}
#menu li:hover ul{
	display:block;
}
a{
  text-decoration: none;
  display: inline-block;
  width: 70px;
  border: 1px solid silver;
  text-align: center;
  color: gray;
}
a:hover{
  color: white;
  background: silver;

Edit: pour le fun, car j'ai le temps :http://codepen.io/anon/pen/xlcgd

18/09/2013, 22h13
Invité
Citation:

Envoyé par cccb24

...et çà ne fonctionne pas...

Ce n'est pas très constructif.
Montrer le code modifié aurait été plus efficace.

Ligne 49 du CSS :
Code:

1 2 3 4 5 6 7 8 dl { display: block; float: left; height: 10px; margin: 0; padding: 0; position: relative; /* AJOUTER */ }
Ligne 105 du CSS :
Code:

1 2 3 4 dl dd { display: none; position: absolute; /* AJOUTER */ }
Je t'encourage néanmoins à suivre les liens que j'ai fournis, et à suivre un tuto plus "sérieux".
18/09/2013, 22h16
cccb24

Pardon j'ai pas les réflexes de développeur, merci pour cette précision. Ca fonctionne parfaitement chez moi !

Thanks !

Je vais me pencher sur vos tutos.
18/09/2013, 22h19
rodolphebrd

Ça marche mais c'est bancale car le code n'est pas bon : des display: block; et cursor: pointer; par exemple, inutiles de même que l'architecture HTML....