Secondary menu with MaterializeCSS

Question

I am trying to create a secondary "mega Menu" that appears on hover below the primary menu.

I just created a secondary menu for this directly below.

I have set its display to none and I am trying to make it appear when hovering over menu links (in the case of the below Codeply, the "Home" link) but it's not working.

Any advice is greatly appreciated.

Example: http://www.codeply.com/go/vLNaAgzFyZ

Allan Pereira · Accepted Answer · 2016-07-12T19:50:08.773

You will have to change the HTML markup.
Try with this CSS:

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

And this 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>

Thank you very much Allan, your code worked perfectly, however if i may ask your advice again. When i add in a header Div the mega menu will not stay open on hover, please see the updated Codeply to see what i mean. http://www.codeply.com/go/vLNaAgzFyZ — Hatori Hanzo, Jul 12 '16 at 19:31
My apologies, i posted the wrong link. Here is the updated one. http://www.codeply.com/go/mUqwkoGD4o — Hatori Hanzo, Jul 12 '16 at 19:44
@HatoriHanzo Add `z-index: 1;` in `#mega-menu` CSS rule. I updated the answer. — Allan Pereira, Jul 12 '16 at 19:49
One more thing, 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. Would I need to use JavaScript? — Hatori Hanzo, Jul 13 '16 at 18:18

Kailo · Answer 2 · 2016-08-26T08:09:04.703

0

For better styling i'm going to hijack "answer" field.

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
  }
);

edited Aug 26 '16 at 08:09

answered Aug 25 '16 at 13:54

Kailo

435
1
4
12

Secondary menu with MaterializeCSS

2 Answers2