带有 MaterializeCSS 的二级菜单答案

【问题标题】：Secondary menu with MaterializeCSS带有 MaterializeCSS 的二级菜单
【发布时间】：2016-07-12 16:24:31
【问题描述】：

我正在尝试创建一个二级“超级菜单”，它出现在主菜单下方。

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

我已将其 display 设置为 none 并且我试图让它在悬停在菜单链接上时出现（在下面的 Codeply 的情况下，“主页”链接）但它不起作用。

非常感谢任何建议。

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

【问题讨论】：

标签： materialize

【解决方案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>

【讨论】：

非常感谢艾伦，您的代码运行良好，但如果我可以再次征求您的意见。当我添加标题 Div 时，巨型菜单不会在悬停时保持打开状态，请参阅更新的 Codeply 以了解我的意思。 codeply.com/go/vLNaAgzFyZ
@HatoriHanzo 链接与问题相同。
抱歉，我发布了错误的链接。这是更新的。 codeply.com/go/mUqwkoGD4o
@HatoriHanzo 在#mega-menu CSS 规则中添加z-index: 1;。我更新了答案。
非常感谢您的帮助艾伦 :)

【解决方案2】：

为了更好的样式，我将劫持“答案”字段。

我需要添加什么才能在单击而不是悬停时打开菜单，以便移动设备用户可以查看菜单...@Hatori Hanzo

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

【讨论】：