生成JavaScript以創建下拉菜單

Question

首先，我嘗試直接在CSS中創建一個Dropdownmenu，但它不能那樣工作，因為我使用ASP.NET並生成了html代碼。 這是我的html代碼的jsfiddle： https ://jsfiddle.net/rxLg0bo4/2/
這就是我的菜單在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>

但是現在我知道我必須使用JavaScript，因為我不能解決其中的一些問題，如果您看一下jsfiddle，您將得到它。
但是我不太了解JavaScript，因此需要一些幫助。 這是我編寫的腳本：

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

因此，最后我想讓它像這樣工作：
當您將鼠標懸停在menu1上時，第一個子菜單應帶有其子菜單。 誰能告訴我該怎么做？

Answer 1

您可以使用jquery的mouseover和mouseout事件來fadeIn/fadeOut菜單，請參閱此JSFiddle入門，但是您需要采用其他方法進行處理，因此需要切換可見性的子菜單。

$( "#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" );
});