使用 MaterializeCSS 的二级菜单

Question

我正在尝试创建一个辅助 "mega Menu"，它会在悬停在主菜单下方时显示。

我刚在下面为此创建了一个二级菜单。

我已将其 display 设置为 none 并且我试图在将鼠标悬停在菜单 links 上时显示它（在下面的 Codeply 的情况下， "Home" link) 但它不起作用。

非常感谢任何建议。

示例：http://www.codeply.com/go/vLNaAgzFyZ

Answer 1

您必须更改 HTML 标记。
试试这个 CSS:

#mega-menu {
    display: none;
    position: absolute;
    left: 0;
    z-index: 1;
}
#mega-menu:hover{
    display: block;
}
#trigger a:hover + nav {
    display: block;
}

还有这个HTML：

<!--Navigation-->
<nav>
    <div class="nav-wrapper teal lighten-2">
        <div class="container">
            <a href="#!" class="brand-logo"><img id="logo-img" class="responsive-img" src="img/main-logo.svg" /></a>
            <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
            <ul class="right hide-on-med-and-down">
                <li id="trigger">
                    <a href="index.html">Home</a>

                    <!--Secondary Mega Menu-->
                    <nav id="mega-menu">
                        <div class="nav-wrapper red lighten-2">
                            <div class="container">
                                <ul class="left hide-on-med-and-down">
                                    <li><a href="index.html">Test</a></li>
                                    <li><a href="badges.html">Test</a></li>
                                    <li><a href="collapsible.html">Test</a></li>
                                    <li><a href="mobile.html">Test</a></li>
                                </ul>
                            </div>
                        </div>
                    </nav>
                </li>
                <li><a href="badges.html">About</a></li>
                <li><a href="collapsible.html">Blog</a></li>
                <li><a href="mobile.html">Portfolio</a></li>
            </ul>


            <ul class="side-nav" id="mobile-demo">
                <div id="mobile-logo"><img class="responsive-img" src="img/mobile-logo.svg" /></div>
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="badges.html">About</a></li>
                <li><a href="collapsible.html">Blog</a></li>
                <li><a href="mobile.html">Portfolio</a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 2

为了更好的样式，我将劫持 "answer" 字段。

what would I need to add in order to have the menu open on click instead of hover so that mobile device users can view the menu... @Hatori Hanzo

$('.dropdown-class').dropdown({
    hover: false // Activate on click
  }
);

使用 MaterializeCSS 的二级菜单

Secondary menu with MaterializeCSS

materialize