CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Divyaanand Sinha
Divyaanand Sinha

Reputation: 396

How to create a dropdown menu on hovering the mouse over an image?

This my jQuery code for displaying a dropdown menu on hovering over an image. Imgbtn_Dsp is the id of the image and nav_menu is the id of the list, but it's not working.

<html>
  <head>
    <title>Dropdownlist Hover</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
    </script>
    <script>
      $('#Imgbtn_Dsp').mouseover(function() {
        $('#nav_menu').slideDown();
      });
    </script>
  </head>
  <body>
    <form id="form1">
      <img src="~/Image/Display.png" / id="Imgbtn_Dsp">
      <div id="nav_menu">
        <ul>
          <li id="l1">AAAAA</li>
          <li>BBBBB</li>
          <li>CCCCC</li>
          <li>DDDDD</li>
        </ul>
      </div>
      <div>
    </form>
  </body>
</html>

Upvotes: 0

Views: 864

Answers (3)

Rahul patel
Rahul patel

Reputation: 1

it could be done without jquery. all you have to do is define parent container of image and list set some css.

<div class="parentDIV">
 <img src="~/Image/Display.png" / id="Imgbtn_Dsp">
  <div id="nav_menu">
    <ul>
      <li id="l1">AAAAA</li>
      <li>BBBBB</li>
      <li>CCCCC</li>
      <li>DDDDD</li>
    </ul>
  </div>
</div>

now define some css:-

.parentDIV{position:relative}
#nav_menu{position:absolute;
          left:0;top:99%;display:none;}

.parentDIV:hover #nav_menu{display:block}

hopefully you will find it useful

Upvotes: 0

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

Modify your script like this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $('#nav_menu').hide();
            $('#Imgbtn_Dsp').mouseover(function () {
                $('#nav_menu').slideDown();
            });
            $('#Imgbtn_Dsp').mouseleave(function () {
                $('#nav_menu').slideUp();
            });
        });
     </script>

You can see the cod in action in this jsfiddle.

Upvotes: 1

Mantas Čekanauskas
Mantas Čekanauskas

Reputation: 2228

Get rid of div and modify ul like this if you want to work it properly ;) 

<ul id="nav_menu" style="display: none">
    <li id="l1">AAAAA</li>
    <li>BBBBB</li>
    <li>CCCCC</li>
    <li>DDDDD</li>
</ul>

Upvotes: 1

Related Questions