AniStark,
- каждое меню представляется скрытым div'ом с абсолютным позиционированием (свойства стиля:
display: none; position: absolute;);
- при определенном событии (
onclick, onmouseover - не важно) этот div (меню) показывается и меняются значения свойств его стиля
left (X координата) и
top (Y координата)
на нужные;
- "нужные значения координат" во втором пункте - это X и Y (left и top) координаты объекта, которому принадлежит меню.
Вот пример (в частности - как вычислять координаты объектов):
<html>
<head>
<title>This Just a test</title>
<style type="text/css">
.menu {
position: absolute;
width: 100px;
height: 200px;
background: #EEE;
border: 1px solid #555;
padding: 5px;
display: none;
}
</style>
<script type="text/javascript">
function init() {
document.getElementById('test').onclick = function() {
document.getElementById('menu1').style.top = getPosY(this) + (this.offsetHeight || this.style.height) + 'px';
document.getElementById('menu1').style.left = getPosX(this) + 'px';
document.getElementById('menu1').style.display = 'block';
return true;
};
return true;
}
function getPosX(obj) {
var curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft;
obj = obj.offsetParent;
}
}
return curleft;
}
function getPosY(obj) {
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
}
return curtop;
}
</script>
</head>
<body onload="init()">
<div class="menu" id="menu1">
<li> point 1
<li> point 2
<li> point 3
<li> point 4
<li> point 5
</div>
<input type="text" id="test" />
</body>
</html>