After NO ONE answered the question,
I Think I've solved the problem:
First I've created a simple <div> with fixed width and height attributes:
<div id="menu" style="width:200px; height:50px; overflow:visible;">
</div>
Then I've added another <div> INSIDE the menu DIV !
Here I use relative position to use z-index attribute. (absolute position is OK too.)
The left attribute let my sub-menu appear in correct position.
The display attribute is set to none; Changing it in javascript code will display the DIV.
<div id="menu" style="width:200px; height:50px; overflow:visible;">
<div id="sub-menu" style="width:200px; height:300px; position:relative; left:200px; display:none">
... items in sub-menu
</div>
</div>
After that I've added two javascript functions for MouseOver and MouseOut :
<div id="menu" style="width:200px; height:50px; overflow:visible;" onmouseover="javascript: MouseOver();" onmouseout="javascript: MouseOut();">
<div id="sub-menu" style="width:200px; height:300px; position:relative; left:200px; display:none">
... items in sub-menu
</div>
</div>
Javascript:
function MouseOver(){
document.getElementById("sub-menu").style.display = "inline-block";
}
function MouseOut(){
document.getElementById("sub-menu").style.display = "none";
}
In this way when mouse pointer goes over the menu DIV, the sub-menu DIV appears, and when mouse pointer goes through the sub-menu DIV, it IS STILL over the menu DIV too, so MouseOut function will not invoked !
The trick was just adding the sub-menu DIV INSIDE the main menu DIV, and use relative position for it ! changin the display attribute was obvious ;)
Excuse my bad explanation.
Thanks.