Discussion :

[lounou]

Coucou

Pour faire mon formulaire déroulant de mon site, je me bat depuis 3 jours a mettre des listes les unes en dessous des autres mais ca ne veut pas ! Ça marche presque sauf que qu'en je survole pour avoir le sous menu elle s'affiche bien mais alignés ! et moi je les souhaites comme un menu déroulant normal... Quelqu'un peux t'il m'aider ?

Le code HTML est :

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
17
18
19
20
<link rel="stylesheet" href="stylesheets/screen.css">
<header id="header" role="banner">
<div class="inner">
 
<nav class="menuPrincipal">
	<ul class="menuTel">
		<li><a href="#">Section 1</a> 
<ul class="sousmenuTel">
	<li><a href="?1">S Section 1</a></li>
	<li><a href="?2">S Section 2</a></li>
	<li><a href="?3">S Section 3</a></li>
	<li><a href="?4">S Section 4</a></li>
</ul>
		</li>
<li><a href="Section2.html">Section 2</a></li>
<li><a href="Section3.html">Section 3</a></li>
	</ul>
</nav>
</div>
</header>

et le code CSS

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
header#header .inner .menuPrincipal {
    display: block;
    padding-left: 0%;
    width: 74.57627%;
    float: right;
    margin-right: 0;
 
 }
 
  header#header .inner .menuPrincipal li {
    margin: 0;
    width: 31.81818%;
    float: right;
    margin-right: 0; }
 
 
  header#header .inner .menuPrincipal li a {
    display: block;
    margin: 5px; 
    width:100px;
text-decoration:none;
padding:5px;
}
 
 
.menuPrincipal ul li ul {
 display:none;
 }
 
.menuPrincipal ul li:hover ul {
 display:block;
 }
.menuPrincipal li:hover ul li {
 float:none;
 }
 
.menuPrincipal li ul {
 position:absolute;
 }
 
<!--[if !IE]> <-->
#menu li ul {
position:absolute;
}
 
<!--> <![endif]-->
<!--[if IE 8]>
#menu li ul {
position:absolute;
}
<![endif]-->

[Invité]

Bonjour,

Code :

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

1
2
3
4
5
6
7
8
9
10
header#header .inner .menuPrincipal li {
    margin: 0;
    width: 31.81818%;
    float: left; /* menu : horizontal */
    margin-right: 0; 
}
 
header#header .inner .menuPrincipal li li {
    float: none; /* sous-menu : vertical */
}

=> CSS: Menus horizontaux

[lounou]

Hello

Merci pour ra réponse, j'ai effectué des modification mais toujours la meme chose, le menu pincipale est OK mais le sous menu lui s'affiche en ligne

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
 
  header#header .inner .menuPrincipal {
    display: block;
    padding-left: 0%;
    width: 74.57627%;
    float: right;
    margin-right: 0;
 
 }
 
  header#header .inner .menuPrincipal li {
    margin: 0;
    width: 31.81818%;
    float: left; /* menu : horizontal */
    margin-right: 0; 
	}
 
header#header .inner .menuPrincipal li li {
    float: none; /* sous-menu : vertical */
}
 
 
  header#header .inner .menuPrincipal li a {
    display: block;
    margin: 5px; 
    width:100px;
text-decoration:none;
padding:5px;
}
 
 
 
.menuPrincipal ul li ul {
 display:none;
 }
 
.menuPrincipal ul li:hover ul {
 display:block;
 }
.menuPrincipal li:hover ul li {
 float:none;
 }
 
.menuPrincipal li ul {
 position:absolute;
 }
 
<!--[if !IE]> <-->
#menu li ul {
position:absolute;
}
 
<!--> <![endif]-->
<!--[if IE 8]>
#menu li ul {
position:absolute;
}
<![endif]-->

[NoSmoking]

Bonjour,
je viens de tester avec ton code HTML et le dernier CSS et j'obtiens

    Section 1    Section 2    Section 3

    S Section 1
    S Section 2
    S Section 3
    S Section 4