Discussion :

[souaddemaroc]

Salut
J'ai un menu horizental avec des liens dans ce menu je veux ajoutés des sous menus et je sais pas quoi faire
Merçi d'avance pour votre aide

[12monkeys]

Bonsoir

Tu peut déjà une fois regarder sur la galerie css : http://css.developpez.com/galerie/ si tu y trouve ton bonheur... sinon t'en inspirer...

[souaddemaroc]

et bain je sais pas quoi faire ça marche pas avec moi et j'ai déjè vu le galerie maintenant voici mon code :

dans la partie head j'ai :

Code :

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
 
<style type="text/css">
<!--
    body {
        margin:0;
        padding:0;
        font: bold 15px/1.5em Verdana;
        align=center;
}
 
h2 {
        font: bold 16px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
 
}
 
img {
border: none;
}
 
    #tabs1 {
      float:left;
      width:100%;
      background:#F4F7FB;
      font-size:93%;
      line-height:normal;
      border-bottom:1px solid #BCD2E6;
      }
    #tabs1 ul {
          margin:0;
          padding: 0px 10px 0 90px;
          list-style:none;
      }
    #tabs1 li {
      display:inline;
      margin:0;
      padding:0;
      }
 
      #tabs1.sousMenu
		{
		 list-style-type: none;
		 margin: 0;
		 padding: 0;
		 border: 0;
		}
		#tabs1.sousMenu li
		{
		 float: none;
		 margin: 0;
		 padding: 0;
		 border: 0;
		}
 
    #tabs1 a {
      float:left;
      background:url('images/tableft1.gif') no-repeat left top;
      margin:0;
      text-decoration:none; padding-left:4px; padding-right:0; padding-top:0; padding-bottom:0
      }
    #tabs1 a span {
      float:left;
      display:block;
      background:url('images/tabright1.gif') no-repeat right top;
      color:#627EB7; padding-left:6px; padding-right:15px; padding-top:5px; padding-bottom:4px
      }
      #tabs1 a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#627EB7;
      }
    #tabs1 a:hover {
      background-position:0% -42px;
      }
    #tabs1 a:hover span {
      background-position:100% -42px;
      }
 
      #tabs1 #current a {
              background-position:0% -42px;
      }
      #tabs1 #current a span {
              background-position:100% -42px;
      }
-->
 </style>

dans la partie body :

Code html :

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
 
     <div id="tabs1" align="center">
            <ul>
                <li id="current"><a href="#"><span>partie 1<span></a></li>
                 <li><a href="#"><span>partie 2</span></a></li>
                 <li><a href="#"><span>partie 3</span></a></li>
                 <li><a href="#"><span>partie 4</span></a></li>
                  <li><a href="#"><span>partie 5</span></a></li>
                  <li><a href="#"><span>partie 5 avec sous menu</span></a>
                       <ul>
                       <li ><a href=#>niveau 1</a>  </li>                   
                      <li > <a href=#>niveau 2</a></li>
                       </ul>
                       </li>
                 </ul>
             </div>

[Deallyra]

Les sous menus ne devraient-ils pas être dans une div séparée?

enfin une sous div

[souaddemaroc]

je vois pas que j'ai plus d'un div dans le code

[Deallyra]

Justement, il t'en faut plusieurs

[devyan]

Les sous menus ne devraient-ils pas être dans une div séparée?

enfin une sous div

Salut,

Pas obligatoirement, le UL du sous menu peut servir pour le masquage/affichage du sous-menu

@ souaddemaroc :

Il manque 'class="sousMenu"' dans UL : <ul class="sousMenu"> ...

Sans cette déclaration les clauses CSS liées à tout le contenu du sous-menu ne peuvent être prises en compte.