Show dropdown menu when image is moused over

css, html, javascript, jquery, web-applications

Solution

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

Problem

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

Original source