2 pièce(s) jointe(s)
Menu Full CSS quelques soucis..
Bonjour,
Je dois develloper un site web intranet pour l'entreprise qui m'emploi en contrat de pro, je me suis dit quitte a faire quelque chose autant le rendre beau, simple d'utilistation, scriptable pour la mise a jour etc etc...
pour tout ca c'est bon :D;
Mon Souci est le suivant mon menu vertical dois masquer certains elements (j'ai trois menu avec un sous menu a environ 12 13 elements ... ca fais moche sinon...) quand je passe la souris dessus mon "sous menu" s'affiche mais ne décalle pas le "menu" apres... je ne sais plus comment faire donc je poste mon code sources
Le code du menu :
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" ></style>
<link href="Untitled-2.css" rel="stylesheet" type="text/css" ></link>
<title>Document sans nom</title>
</head>
<body>
<div id="menu"><ol id="navigation">Acceuil
<li><a href="#" title="aller à la section 1">item1</a></li>
<li><a href="#" title"tatda">tada</a></li>
<li><a href="#" title="aller à la section 2">item2</a></li>
<li><a href="#" title="aller à la section 3">item3</a></li>
<li><a href="#" title="aller à la section 4">item4</a></li>
<li><a href="#" title="aller à la section 5">item5</a></li>
</ol>
<ol id="navigation1">Sécurité
<li><a href="#" title="widéo">test</a></li>
</ol>
</div>
</body>
</html> |
Le CSS du menu :
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
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
| @charset "UTF-8";
/* CSS Document */
#menu {
width:240px;
height:800px;
display:block;
border:2px solid black;
float:left;
}
#navigation {
background-image:url(images/boutonff.png);
width: 221px;
height: 41px;
list-style: none;
padding: 0;
border:medium black;
line-height: 40px;
text-align:center;
float:left;
/* left: 11px;
top: 27px;*/
}
#navigation:hover, #navigation:focus, #navigation:active{
background-image:url(images/boutonon.png);
}
#navigation li{
display:none;
background-image:url(images/boutonff.png) ;
color: #fff ;
width:221px;
height:41px;
clear:both;
}
#navigation li a {
display: block ;
color: #fff ;
font: 1em "Trebuchet MS",Arial,sans-serif ;
line-height: 40px ;
text-align: center ;
text-decoration: none ;
width:222px;
height:41px;
}
#navigation:hover li, #navigation:focus li, #navigation:active li{display:block;}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
background-image:url(images/boutonon.png);
text-decoration: underline ;
width:220px;
height:40px;
}
#navigation1 {
background-image:url(images/boutonff.png);
width: 221px;
height: 41px;
list-style: none;
padding: 0;
border:medium black;
line-height: 40px;
text-align:center;
}
#navigation1:hover{
background-image:url(images/boutonon.png);
}
#navigation1 li{
display:none;
background-image:url(images/boutonff.png) ;
color: #fff ;
width:221px;
height:41px;
clear:both
}
#navigation1 li a {
display: block ;
color: #fff ;
font: 1em "Trebuchet MS",Arial,sans-serif ;
line-height: 40px ;
text-align: center ;
text-decoration: none ;
width:222px;
height:41px;
}
#navigation1:hover li{display:block;}
#navigation1 li a:hover, #navigation1 li a:focus, #navigation1 li a:active {
background-image:url(images/boutonon.png);
text-decoration: underline ;
width:220px;
height:40px;
} |
(ci joint les images des boutons que j'ai créé )
Voila,
Merci d'avance!
