Show dropdown menu when image is moused over

Question

I am trying to have drop down menu whenever someone hover mouse over an image.

    <div>
        <img id="whoimg" onmouseover="forImg(this)" src="/static/images/whoisitfor.png" height="70" style="cursor:pointer;">
    </div>

    <div style="position: absolute; right:30px; top: 23px;">
        <span style="font-weight: bold;font-size:30px; color: #C4066B;">FOR</span>
    </div>

</div>

I am able to write onmouseover function. But as i am new at web development i don't know what to do next. I have Three images placed horizontally including above one.

function forImg()
{
alert("FOR");
}

I have tried javascript but i am getting no where. Don't know what to do...Please help me

Solution 1

You wanted to show dropdown menu on mouseover of an image;

Let this be your menu:

 <div id="nav_menu">
            <ul>
                <li id="l1">AAAAA</li>
                <li>BBBBB</li>
                <li>CCCCC</li>
                <li>DDDDD</li>
            </ul>
   </div>

bind event on your image like this :

$('#whoimg').mouseover( function(){
    $('#nav_menu').slideDown();
});

Demo Fiddle

Solution 2

I would highly suggest using CSS for this. There are plenty of tutorials available if you do some googling... or you could just take the easy way out and use a site like this: http://cssmenumaker.com/css-drop-down-menu

Comments

[Felypp Oliveira]

I agree with @nullSharp... use CSS for this. Something like: div.parentImg:hover > ul#dropdown{ display: inline-block; }

[Admin]

I tried your solution but nothing seems to happening. I have three images and all of those images has drop down menu. Whenever some one hover mouse on them they should react to that event.

[Admin]

your solution worked at last. But can you tell me. How to prevent the drop down menu from closing until user selects the link or item in that menu..Thanks for your help...