使用CSS制作Dropdownmenu

Question

我想制作一个Dropdownmenu，但这并不容易，因为我正在使用面板。 这是我的菜单。我已经获得了nav =菜单，然后我得到了一个菜单面板和一个子菜单面板。默认情况下不显示子菜单面板。 现在，当我将鼠标悬停在pnlMenu上时，我想要一个下来的块。

 <div id="wrapper_menu">
        <div id="menuicon">
            <div class="menubar" id="menubar-top"></div>
            <div class="menubar" id="menubar-mid"></div>
            <div class="menubar" id="menubar-bottom"></div>
        </div>
        <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>
    </div>

这是我的css代码。我还需要一个选择器来改变另一个div。我不知道它是否真的可以这样，但不是任何应该显示Dropdownmenu的东西，我只是想看看我是否可以这样选择。

    #pnlMenu .menu_link:hover #pnlSubmenu .submenu_link {
    height:50px;
   display:block;
}

因为我正在使用母版页，所以会生成代码。 这是我的HTML代码：

Answer 1

这不起作用

    #pnlMenu .menu_link:hover #pnlSubmenu .submenu_link {
    height:50px;
   display:block;
}

因为它假定#pnlSubmenu是.menu_link的孩子，而不是#pnlSubmenu。

事实上#pnlMenu是array (size=4) 0 => array (size=1) 'ma_ncc' => string '1' (length=1) 1 => array (size=1) 'ma_ncc' => string '2' (length=1) 2 => array (size=1) 'ma_ncc' => string '3' (length=1) 3 => array (size=1) 'ma_ncc' => string '4' (length=1) 的兄弟姐妹，因此您可能需要重新考虑这种做法。

我怀疑在HTML的当前结构下交互性可能需要javascript，因为没有CSS选择器会允许您通过在第一个中悬停链接来影响子菜单div菜单div