Menu déroulant qui déplace le texte qui devrait resté caché en dessous

**Pierre Fauconnier** · 08/02/2009, 12h38

Bonjour

Grâce à ce tutoriel de Marc Hertzog, j'ai développé un menu déroulant pour mon application Web.

C'est chouette, mais...!

En dessous de la barre de menu, j'ai du texte, et lorsque j'active un menu, le texte, qui devrait être caché sous le menu qui se déroule, est déplacé... ce qui enlève évidemment beaucoup à l'intérêt du menu déroulant...

Une piste pour le néophyte que je suis?

Merci et bon dimanche

**Macmillenium** · 08/02/2009, 14h00

Bonjour,

Un bout de code pour mieux comprendre le problème ?

**GihefBey** · 09/02/2009, 13h11

Bonjour,

Si tu t'y es pris comme dans le tuto, une solution simple serait de positionner le menu :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>Testos</title>
 
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta name="robots" content="all" />
 
  <base href="http://css.developpez.com/tutoriels/menu-deroulant/fichiers/" />
 
	<link rel="stylesheet" type="text/css" media="screen" href="http://css.developpez.com/tutoriels/menu-deroulant/fichiers/menu01.css" />
  <style type="text/css">
/* petites adaptations */
      body {
     /* juste pour annuler l'image insérée par la feuille de styles liée */
        background-image: none !important;
        }
      #conteneur {
        position: relative;
        margin: 0 auto;
        width: 644px;
        text-align: left;
        border : 1px solid #fff;
        background: #AFA99B url("fond.jpg") no-repeat top left;
        }
 
/* modification du menu */
      #menuDeroulant {
        position : absolute !important;
        }
 
/* modification de ce qui arrive en dessous */
      #contenu {
        margin : 32px 16px;
        color: #666;
        }
  </style>
</head>
 
 
<body>
<!-- petite adaptation -->
  <div id="conteneur">
 
<!-- menu -->
    <ul id="menuDeroulant">
      <li>
        <a href="#">Les castors</a>
        <ul class="sousMenu">
          <li><a href="#">Pelage doux mais robuste qu'on aime bien beaucoup</a></li>
          <li><a href="#">Ils confectionnent des barrages !</a></li>
          <li><a href="#">Ils ont des grandes dents</a></li>		
        </ul>
      </li>
      <li>
        <a href="#">Partie 2</a>
        <ul class="sousMenu">			      
          <li><a href="#">whisky</a></li>
          <li><a href="#">vodka</a></li>
          <li><a href="#">gin</a></li>
          <li><a href="#">vin</a></li>
          <li><a href="#">champagne</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Partie 3</a>
        <ul class="sousMenu">			      
          <li><a href="#">pommes</a></li>
          <li><a href="#">poires</a></li>
          <li><a href="#">ananas</a></li>
          <li><a href="#">pamplemousse</a></li>
          <li><a href="#">banane</a></li>				
          <li><a href="#">raisins</a></li>
          <li><a href="#">framboises</a></li>
          <li><a href="#">fraises</a></li>
          <li><a href="#">mirabelles</a></li>
          <li><a href="#">groseilles</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Partie 4</a>
        <ul class="sousMenu">			      
          <li><a href="#">tomates</a></li>
          <li><a href="#">haricots</a></li>
          <li><a href="#">carrottes</a></li>
          <li><a href="#">choux</a></li>
          <li><a href="#">concombres</a></li>				
          <li><a href="#">courgettes</a></li>
          <li><a href="#">endives</a></li>
          <li><a href="#">navets</a></li>
          <li><a href="#">epinards</a></li>
          <li><a href="#">avocat</a></li>
        </ul>
      </li>
    </ul>
 
<!-- ce qui arrive en dessous -->
    <div id="contenu">
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat. Sed arcu libero, auctor ac, mattis fermentum, vestibulum at, massa. Pellentesque eget sem at lorem suscipit iaculis. Integer mollis, nunc nec hendrerit vulputate, nisi nisi sagittis felis, at dignissim justo ipsum eget nisl. Mauris urna sem, faucibus accumsan, blandit vel, accumsan eget, augue. Suspendisse potenti. Duis dignissim. Nulla turpis nisi, tempus sit amet, elementum sed, convallis sit amet, nunc. Pellentesque lacinia. Nunc ultrices malesuada augue. Praesent vel sem in justo ornare varius. Nulla quis mi et odio vehicula mattis. Fusce auctor sem non augue ultricies mollis. Nam nec nisl. Donec ullamcorper. Etiam sem nisl, luctus vitae, dapibus a, porta et, risus. Etiam facilisis rhoncus odio. Vivamus gravida egestas ligula. Mauris gravida.
      </p>
      <p>
      Pellentesque facilisis, dolor in gravida dignissim, ligula odio porttitor tellus, sit amet rutrum odio turpis a nunc. Ut eget nunc. Proin posuere venenatis ligula. Curabitur blandit vehicula ante. Proin ac tortor eu arcu facilisis vestibulum. Nulla consectetur pede mollis felis. Maecenas interdum ante at pede fermentum lacinia. Nullam vitae lacus eget diam cursus blandit. Proin in turpis eget turpis pretium ultricies. Maecenas viverra. Curabitur molestie. Mauris felis justo, egestas sit amet, porta quis, condimentum ac, justo. Proin felis tellus, lobortis et, mollis vel, interdum ac, nibh. Mauris feugiat. Quisque ligula ante, ornare ut, pharetra et, facilisis fringilla, arcu. Pellentesque dignissim sem eu sapien. Duis in nunc quis enim viverra ornare. Pellentesque fermentum.
      </p>
      <p>
      Integer vel justo. In hac habitasse platea dictumst. Ut est nisl, iaculis vel, laoreet non, laoreet non, nisl. Quisque semper ultricies enim. Vivamus sodales hendrerit nulla. In dui ante, lobortis quis, commodo ut, cursus in, neque. Vestibulum aliquam, nisi ut tristique interdum, massa tortor sodales leo, ut scelerisque nisl odio at elit. Phasellus a mi quis neque rutrum ornare. Nullam convallis magna sed urna. Praesent eu tortor at est luctus rhoncus. Morbi blandit sem eget erat. Pellentesque dui orci, fringilla non, suscipit non, facilisis vel, mi. Mauris nunc. In eu augue. Aliquam porta, sem ac tincidunt bibendum, leo dolor ultrices velit, nec convallis ligula tortor nec est. Donec ligula.
      </p>
      <p>
      Praesent feugiat mattis mi. Suspendisse sapien. In libero purus, pretium at, facilisis in, sagittis a, tellus. Aenean non quam rhoncus erat lobortis consequat. Nulla facilisi. Ut lacinia dignissim diam. Fusce nisl libero, porttitor non, mollis non, sodales non, odio. Fusce laoreet urna sit amet ligula. Duis nec pede nec metus ullamcorper tempor. Praesent accumsan urna vel dolor bibendum ultrices. Ut lorem nunc, viverra in, auctor non, consequat et, tellus. Aliquam commodo, justo vel suscipit cursus, massa diam consectetur sapien, vel molestie dolor mauris non dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sagittis turpis. Suspendisse volutpat auctor nulla. Fusce arcu ante, ultrices at, hendrerit sit amet, imperdiet sit amet, odio.
      </p>
      <p>
      In hac habitasse platea dictumst. Curabitur tempus dignissim justo. Curabitur consequat, libero tincidunt rutrum ultricies, sapien eros congue tortor, sed porta nunc est vel lorem. Mauris lobortis. Ut facilisis. Phasellus adipiscing ante non augue. Quisque orci lectus, lacinia sed, ornare iaculis, bibendum sit amet, risus. Sed arcu. Aliquam laoreet interdum nulla. Vestibulum ac nisl a purus vehicula accumsan.
      </p>
      <p id="generated">5 paragraphes, 517 mots, 3538 caractères générés par <a href="http://www.lipsum.com/" title="Lorem Ipsum">Lorem Ipsum</a></p>
    </div>
 
  </div>
</body>
</html>

Et ensuite de déplacer ce qui arrive en dessous avec une margin-top.

Par exemple (juste pour un peu de confort et pouvoir tester dans l'immédiat. Lien valide quelques jours).

-

**Pierre Fauconnier** · 09/02/2009, 15h01

Code :

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

1
2
3
4
5
#menuDeroulant
{
position : absolute;
etc.
}

Nickel

. Ca fonctionne bien.

Merci. Bonne semaine

Menu déroulant qui déplace le texte qui devrait resté caché en dessous

Positionnement en CSS avec z-index

Partager

Partager