title: Dropdown menu using Foundation, JQuery
body: <p>I'm currently working on a Mega-Menu for a school project, and it has to be in dropdown-style. We're using Foundation and Laravel for the whole project.</p>
  
  <p>I've been trying to find a way to have colomns in the mega-menu, kind of like <a href="https://www.protest.eu/shop/category/men/" rel="nofollow noreferrer">this website</a></p>
  
  <p>However, the following code is the only solution that kinda works like I would like it to. It has the four colomns that I want, but I can't trigger it via a hover. My JQuery doesn't work, and I can't find a way to select the dropdown menu by CSS/SASS.</p>
  
  <p>So, I have two questions: Is there a better way to format this menu (In HTML), and how can I activate the Hover trigger to activate the menu?</p>
  
  <p>Here's my HTML code (Shortened, because it's pretty long):</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-static-top large-12"&gt;
      &lt;div class="container"&gt;
          &lt;div class="container top-bar hide-for-small-only"&gt;
              &lt;div class="top-bar-left"&gt;
                  &lt;div class="row dropdown menu" data-dropdown-menu&gt;
                      &lt;ul class="large-3 m-menu dropdown-content"&gt;
                          &lt;li class=""&gt;&lt;a href="#"&gt;Technologie Verte&lt;/a&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;a href="/projets/categories/1"&gt;Énergie Verte&lt;/a&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;a href="/projets/categories/2"&gt;Anti-Pollution&lt;/a&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;a href="/projets/categories/3"&gt;Implants&lt;/a&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;a href="/projets/categories/4"&gt;Santé&lt;/a&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;a href="/projets/categories/5"&gt;Technologie Biologique&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;ul class="large-3 m-menu dropdown dropdown-content"&gt;
                          &lt;li class=""&gt;&lt;a href="#"&gt;Divertissement&lt;/a&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;a href="/projets/categories/6"&gt;Réalité Augmentée (AR)&lt;/a&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;a href="/projets/categories/7"&gt;Réalité Virtuelle (VR)&lt;/a&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;a href="/projets/categories/8"&gt;Jeux Vidéos&lt;/a&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;a href="/projets/categories/9"&gt;Holograms&lt;/a&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;a href="/projets/categories/10"&gt;Gadgets&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;ul class="large-3 m-menu dropdown dropdown-content"&gt;
                          &lt;li class=""&gt;&lt;a href="#"&gt;Utilitaires&lt;/a&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;a href="/projets/categories/11"&gt;Wearables&lt;/a&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;a href="/projets/categories/12"&gt;Audio&lt;/a&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;a href="/projets/categories/13"&gt;Impression 3D&lt;/a&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;a href="/projets/categories/14"&gt;Maison Intelligente&lt;/a&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;a href="/projets/categories/15"&gt;Applications&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;ul class="large-3 m-menu dropdown dropdown-content"&gt;
                          &lt;li class=""&gt;&lt;a href="#"&gt;Futuristes&lt;/a&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;a href="/projets/categories/16"&gt;Spatial&lt;/a&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;a href="/projets/categories/17"&gt;Temporel&lt;/a&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;a href="/projets/categories/18"&gt;Armée&lt;/a&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;a href="/projets/categories/19"&gt;Transportation&lt;/a&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;a href="/projets/categories/20"&gt;Intelligence Artificielle (AI)&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>The CSS that I have isn't working, so if some of you need it, it would be my pleasure to post it. 
  Thanks in advance to everyone replying! I'll also try to post a picture of what it looks like, however I currently have some problems with Wampserver, so I'll post it as soon as I can</p>