Submenu - Fade in and Fade out submenu in menu bar

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.