生成JavaScript以创建下拉菜单

Question

First, I tried to make a Dropdownmenu directly in the CSS but it doesn't work like that, because I use ASP.NET and the html Code gets generated. Here's my jsfiddle for my html code: https://jsfiddle.net/rxLg0bo4/2/
And this is how my menu works in ASP:

<nav id="menu">

            <asp:Panel ID="pnlMenu" runat="server"></asp:Panel>
            <asp:Panel ID="pnlSubmenu" runat="server">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </asp:Panel>
        </nav>

But now I know that I have to use a JavaScript, because I can't adress some of them, if you look at the jsfiddle you will get it.
But I don't really know JavaScript, so I need some help. This is a script, which I made:

  $('#pnlmenu').on('click', function click(){
        $('#pnlSubmenu').height(50);});

So in the end I would like to have it work like that:
When you hover over menu1, the first submenupanel should dropdown with its submenulinks. Can anyone show me how to do that?

Answer 1

You can use mouseover and mouseout events of jquery to fadeIn/fadeOut the menu see this JSFiddle to get you started, but you need to work out the other way so your submenu needs visibility toggled instead.

$( "#pnlMenu .menu_link" ).mouseover(function() {
    $(".submenu_panel").css("height", "100px");
    $("#pnlSubmenu").fadeIn( "slow" );
});

$( "#pnlMenu .menu_link" ).mouseout(function() {
    $(".submenu_panel").css("height", "0px");
    $("#pnlSubmenu").fadeOut( "slow" );
});