StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Thank you all for your helps and ideas.</p> <p>I Think I've solved the problem:</p> <p>First I've created a simple with <strong>fixed</strong> width and height attributes:</p> <pre><code><div id="menu" style="width:200px; height:50px; overflow:visible;"> </div> </code></pre> <p>Then I've added another <strong>INSIDE</strong> the menu DIV !</p> <p>Here I use <strong>relative</strong> position to use z-index attribute. (absolute position is OK too.)</p> <p>The left attribute let my sub-menu appear in correct position.</p> <p>The display attribute is set to none; Changing it in javascript code will display the DIV.</p> <pre><code><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> </code></pre> <p>After that I've added two javascript functions for MouseOver and MouseOut :</p> <pre><code><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> </code></pre> <p><strong>Javascript:</strong></p> <pre><code>function MouseOver(){ document.getElementById("sub-menu").style.display = "inline-block"; } function MouseOut(){ document.getElementById("sub-menu").style.display = "none"; } </code></pre> <p>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 !</p> <p>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 ;)</p> <p>Excuse my bad explanation. Thanks.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload