Click here to Skip to main content
14,773,669 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi friends,

I wanna create a menu bar in which when mouse pointer goes over an item, a related extra menu should appears beside the item, and when mouse pointer goes out, it should disappears.

For example when you place your mouse pointer on your username at the top right of this page, you'll see a menu contains My Settings, My Contact Info, ...

I wanna implement such menu.

Toggling the visibility(or changing the display) attribute of the extra menu element ( such as div ) is obvious.
But my problem is how could I detect that the mouse pointer is hovering over the extra menu, and it should NOT disappear till mouse pointer goes out !

I don't wanna use JQuery.

Thanks a lot.
Updated 12-Aug-13 19:30pm
bbirajdar 23-Jul-13 6:59am
Why not jQuery ?
bbirajdar 23-Jul-13 6:59am
And what have you tried ?
vinay.tatipamula 23-Jul-13 7:02am

1 solution

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;">


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

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


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.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900