Discussion :

[unix27]

Salut, je ne suis pas un pro en CSS ni en DHTML donc mon souci est que j'ai cette structure :
page Header.html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="container">
 <div id="navigation">
    <ul id="navlist">
    <li><a href="index.php">Accueil</a></li>
        <li><a href="index.php?p=Menu1"><span class=pn2> Menu1</span></a></li>
    <ul class="sousmenu">
           <li><a href="index.php?p=SouMenu1"><span class=pn2>SouMenu1 </span></a></li>
           <li><a href="index.php?p=SouMenu2"><span class=pn2>SouMenu2 </span></a></li>
           <li><a href="index.php?p=SouMenu3"><span class=pn2>SouMenu3 </span></a></li>
           <li><a href="index.php?p=SouMenu4"><span class=pn2>SouMenu4</span></a></li>
   </ul>
 <li><a href="index.php?p=questions"><span class=pn2>Contact</span></a></li>

page Style.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
 
#container {
			width: 750px;
			margin: 0 auto;
			font-family: Lucida Grande, Tahoma, Arial, Helvetica, sans-serif; /* Lucida Grande for the Macs, Tahoma for the PCs */
			font-size: 11px;
			line-height: 1.6em;
			color: #666;
			background-color: #FFF;
		}
 #navigation ul {
			margin-left: 0;
			padding-left: 0;
			list-style-type: none;			
			float: right;/*left;*/
			width: 140px;
		}
 
		#navigation a {
			display: block;
			padding: 5px;
			width: 110px;
			border-bottom: 1px solid #CCC;
		}
 
		#navigation a:link, #navlist a:visited {
			color:#CC6714;
			text-decoration: none;
		}
 
		#navigation a:hover {
			background: #000000 url(../images/arrow.gif) 96% 50% no-repeat;
			background-color: #F5F5F5;
			color:#CC6714;
		}

Je souhaite afficher SousMenu1,...4 une fois que le curseur est positionné sur Menu1 et aussi si c'est possible avec prise en compte des navigateurs suivant:IE6,IE7,Mozila3

[FoxLeRenard]

Salut, je ne suis pas un pro en CSS ni en DHTML
faire un menu

Pour réaliser et maitriser ce type de menu, il faudrait mieux utiliser un DOCTYPE strict.
D' autre part il est certain que tes spam sont inutils voire nuisibles !
tes UL et DIV ne sont pas fermés

Bref prends un model simple par exemple sur notre TOPO
http://css.developpez.com/tutoriels/menu-deroulant/

Regardes le résultat ici
http://css.developpez.com/tutoriels/...enu01test.html

il te suffit d'en afficher le source, le CSS est ici

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
 
body {
 font: 11px verdana, sans-serif;
 background: #AFA99B url("fond.jpg") top left no-repeat;
 margin: 0;
 padding: 0;
}
 
/* -----------------------------------------------
Tha Drop-down Menu
-------------------------------------------------- */
 
/* Elements de premier niveau
--------------------------------------*/
#menuDeroulant
{
	background: #6A6458;
	width: 644px;
	height: 21px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	position: absolute;
	top: 0;
	left: 0;
}
#menuDeroulant li
{
	float: left;
	width: 150px;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
	display: block;
	height: 1%;
	color: #FFF;
	background: #3B4E77;
	margin: 0;
	padding: 4px 8px;
	border-right: 1px solid #fff;
	text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }
 
#menuDeroulant .sousMenu
{
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant .sousMenu li
{
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	width: 149px;
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
	display: block;
	color: #FFF;
	margin: 0;
	border: 0;
	text-decoration: none;
	background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
	background-image: none;
	background-color: #F2462E;
}
 
#menuDeroulant li:hover > .sousMenu { display: block; }

[unix27]

ok,merci je vais essayer