Вторичное меню с MaterializeCSS

Question

Я пытаюсь создать вторичное «мега-меню», которое появляется при наведении ниже основного меню.

Я только что создал дополнительное меню для этого непосредственно ниже.

Я установил его display в none, и я пытаюсь сделать его отображающимся при наведении курсора на ссылки меню (в случае ниже Codeply, ссылка «Главная»), но он не работает.

Любые советы приветствуются.

Пример: http://www.codeply.com/go/vLNaAgzFyZ

Answer 1

Вам придется изменить HTML-разметку.
Try с этим 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

Для лучшего стиля я собираюсь захватить поле "ответ".

что бы мне нужно добавить, чтобы иметь меню открытым по щелчку вместо висения, так что можно просматривать меню ... @Hatori Hanzo

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