如何在将鼠标悬停在图像上时创建下拉菜单？

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.

这是我的jQuery代码,用于在悬停在图像上时显示下拉菜单。 Imgbtn_Dsp是图像的id,nav_menu是列表的id,但它不起作用。

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

3 个解决方案

#1

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

如果你想正确地工作,摆脱div并修改这样的ul;)

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

#2

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.

你可以在这个jsfiddle中看到鳕鱼的行动。

#3

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

它可以在没有jquery的情况下完成。你所要做的就是定义图像的父容器,列出一些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:-

现在定义一些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

希望你会发现它很有用

#1