Position d'un div en fonction de la position de l'élement parent

Bonjour,

J'ai actuellement un menu (dans le style de la barre des tâches Windows) avec un bouton à gauche et quelques un à droite.
Au survol (:hover) d'un bouton, un sous-menu apparait. Actuellement, il apparait bien positionné par rapport à son bouton.

Seulement, à gauche : pas de problème.
A droite : le sous-menu est aligné sur la droite et donc, provoque un débordement de la page.

Or, je voudrais faire en sorte que ce sous-menu de droite soit affiché de telle sorte à ce qu'il n'y ai pas de débordement. En gros, à gauche du bouton.

Et ce, avec un minimum de code...

Est-ce possible en CSS uniquement ?

Merci pour votre aide.

bonjour,
à priori, oui.

Voici un minimum* de code CSS :

Code:

* C'est déjà bien plus que le code que tu ne montres pas !

Voici les différents codes :

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
56
57
58
59
60
61
62
63
64
65
66
body, html {
	height:				100%;
	width:				100%;
	padding:			0px;
	margin:				0px;
	background-color:	#CCCCCC;
	font-size:			12px;
	font:Georgia;
}
 
div#taskbar {
	position:			absolute;
	background-color:	#333;
	top:				100%;
	height:				40px;
	margin-top:			-40px;
	width:				100%;
}
div#taskbar ul, div#taskbar li {
	padding:0px;
	margin:0px;
	list-style:none;
	font-weight:bold;
}
 
div#taskbar li.bouton {
	display:inline-block;
	line-height:30px;
	margin-top:5px;
	margin-left:5px;
	background-color:#333;
	padding-left:10px;
	padding-right:10px;
	cursor:pointer;
	border:1px solid white;
	color:white;
	z-index:1;
}
 
 
div#taskbar ul li.bouton ul#menu {
	display:none;
	position:absolute;
	width:0px;
	height:0px;
	margin-top:-35px;
	margin-left:-11px;
	top:100%;
	background-color:#333;
	z-index:2;
	padding:5px;
	padding-bottom:0px;
	border:1px solid white;
}
div#taskbar li.bouton:hover {
	background-color:#666;
	margin-top:0px;
	line-height:35px;
}
 
div#taskbar ul li.bouton:hover ul#menu {
	display:block;
	width:200px;
	height:225px;
	margin-top:-266px;
}

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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>STYLE WIN</title>
 
<link rel="stylesheet" type="text/css" href="mep.css">
 
</head>
 
<body>
 
<div id="taskbar">
	<ul style="float:right; margin-right:5px;">
    	<li class="bouton email">&nbsp;
        <li class="bouton action">&nbsp;</li>
    	<li class="bouton">00:56</li>
    </ul>
 
	<ul>
    	<li class="bouton">AcaNet
            <ul id="menu">
                <li href="#tesqt">Etablissement</li>
                <li>Paramètres</li>
                <li>Professeurs</li>
                <li>Elèves</li>
                <li>Outils</li>
            </ul>
		</li>
    </ul>
 
</div>
 
 
</body>
</html>