CSS Menu deroulant verticale

Bonjour,

Je fais appelle à vous car je n'arrive pas a faire un CSS, j'ai 2 images qui doivent être collés à gauches et un menu par dessus qui se deplie quand on clique dessus (qui propose donc plus de lien, fait, sous forme de puces)

Le problème c'est que lorsque j'essaye de placer les éléments,lorsque le menu se deplie il "pousse" toutes les images et donc décale tout le site, j'aimerais que lorsque le site se "déroule" il se "déroule" juste sur l'image sans rien modifier...

j'ai essayé avec des float, des positions fixed, absolute (qui fait que le menu se balade si on dezoom ou quand on zoom)

j'ai essayé plein de truc et mon code est de plus en plus sale... Le menu est divisé en deux ou une partie restera fixe et l'autre bougera avec l'écran...

Voila je sais pas si j'ai étais claire,
merci pour l'aide et la lecture :)

Bonjour,

As-tu essayé de mettre juste tes images en position:absolute?

On pourrait voir tes codes stp? :ccool:

Donc j'ai deja testé l'absolute,mais l'aboslute ca bouge dans tout les sens si le zoom reste pas a 100% donc c'est vite le bordel :)

HTML :

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
   <!------------------------------------>
 
    <img id='img-menu-haut' src="images/home_levant-securite-tete.png" alt="menu du haut" /><br/>
	<img id='img-fond-haut-gauche' src="images/menu_levant-securite-haut.png" alt="menu haut gauche" /><br/>
    <!--<img id='img-ligne-gauche' src="images/menu_levant-securite-centre.jpg" alt="menu bas gauche" /><br/>-->
 
<div id="menu-gauche">
	<div id='menu-fixe'>
        <div class="menu-gauche" id="menu1" onclick="afficheMenu(this)">
            <a href="#"><h3 class='titre-menu-gauche'>LEVANT Sécurité</h3></a>
        </div>
        <div id="sousmenu1" style="display:none">
            <ul>
                <div class="sousmenu">
                    <a href='societe.php'><li>Société</li></a>
                </div>
                <div class="sousmenu">
                    <a href="#"><li>Actualité</li></a>
                </div>
                <div class="sousmenu">
                    <a href="#"><li>Valeurs et compétences</li></a>
                </div>
                <div class="sousmenu">
                    <a href="#"><li>Références</li></a>
                </div>
            </ul>
        </div>
 
        <div class="menu-gauche" id="menu2" onclick="afficheMenu(this)">
            <a href="#">Menu 2</a>
        </div>
        <div id="sousmenu2" style="display:none;">
            <div class="sousmenu">
                <a href="#">Sous-Menu 2.1</a>
            </div>
            <div class="sousmenu">
                <a href="#">Sous-Menu 2.2</a>
            </div>
            <div class="sousmenu">
                <a href="#">Sous-Menu 2.3</a>
            </div>
        </div>
 	</div>
 
    <!------------------------------------>
 
       <!------------------------------------>
	<div id='menu-fixe'>
        <div class="menu-gauche" id="menu3" onclick="afficheMenu(this)">
            <a href="#">Menu 3</a>
        </div>
 
        <div class="menu-gauche" id="menu4" onclick="afficheMenu(this)">
            <a href="#">Menu 4</a>
        </div>
        <div id="sousmenu4" style="display:none">
            <div class="sousmenu">
                <a href="#" >Sous-Menu 4.1</a>
            </div>
            <div class="sousmenu">
                <a href="#">Sous-Menu 4.2</a>
            </div>
            <div class="sousmenu">
                <a href="#">Sous-Menu 4.3</a>
            </div>
            <div class="sousmenu">
                <a href="#">Sous-Menu 4.4</a>
            </div>
            <div class="sousmenu">
                <a href="#">Sous-Menu 4.5</a>
            </div>
        </div>
 	</div>
 
 
     <!------------------------------------>
 
    <!----------------------------------------------------------------->
 
 
    <img id='img-fond-bas-gauche' src="images/menu_levant-securite-bas.png" alt="menu bas gauche" />
 
 
 
 
 
    <img id='img-telephone' src="images/menu-telephone.png" alt="téléphone fax" />
 
</div>

CSS :

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
#img-fond-haut-gauche{
 
	z-index:-1;
	float:left;
}
#img-ligne-gauche{
 
	z-index:-1;
	float:left;
 
}
#img-fond-bas-gauche{
 
	z-index:-1;
	float:left;
 
 
}
 
#img-menu-haut{
 
	margin-bottom: -4px;
	z-index:-1;
	float:left;
 
}
 
#img-telephone {
 
	margin-top: 180px;
	position:fixed;
 
}
.titre-menu-gauche{
 
	background-image: url('/images/menu-titre-violet.png');
	background-repeat: no-repeat;
	color:#FFFFFF;
	padding-left: 10px;
 
}
 
 
 
.titre-menu-gauche:hover{
	color: #6f7072;
}
 
#menu-gauche{
 
 
	width: 250px;
	float:left;
 
}

Voila j'espère avoir donné le plus possible car tout le code serait illisible a moins que vous passiez du temps dessus (ce qui n'est pas super agréable jepense...)

Merci de vos réponses