Issue with Drilldown menu when creating a mega menu

Hi guys - really hoping someone far cleverer than me can help me :slight_smile:
I’m building a navigation for a site which uses dropdown with some changes to create a mega menu on desktop, but drilldown on mobile.
In order to create the mega menu, I’ve had to introduce a container within my list structure (I’m using a drop down pane at the top level to create the full width menu which works beautifully with dropdown)
.
Unfortunately though, the introduction of the div within the list (although valid) breaks the drill down JavaScript, and the classes don’t get applied to my list items. I’m assuming it’s looking for direct children rather than just nested children.

Has anyone had any experience of fixing this before I face having to unpick the JS?
Many thanks!!

Is this what you’re looking for:

https://www.meritshealth.com/

I believe I did it with css only.

Hmmm it certainly looks that way!! I’ll have a good dig through it, thank you! :slight_smile:

Hi @iamrobert, thanks again for nudging me in the right direction. I’ve got mine working beautifully. Thanks again!

Hey @rowenajbellamy can you share the solution that worked for you? I’ve experienced the same issue with the mega menu to drilldown.

Hey guys - the solution will be going live towards the end of Sept to have a nosy at, but in the meantime let me see how I can help. Essentially I had to strip out any containers from the markup, and do it purely with CSS which I didn’t think was possible at first. So, basically my markup is a nested list with nothing in there but the Foundation classes, and my SASS looks like the below. Obviously there’s a bunch of stuff in there you wouldn’t need, but it’s the positioning of the 2nd level lists that’s the important bit (especially the position: unset - that allows your nested list to break out of the positioning)! Shout me if I can help further!

.top-bar-left

  {

    ul.dropdown

    { 

      overflow:visible;

      ul 

      {

        background-color:$white;

        margin-left:0px;

      }

      > li

      {

        position:unset;

        > ul // this is our 2nd level, or the top level shown in the mega menu

        { 

          position: absolute;

          padding: 0;

          width: 1024px;

          top:100%!important;

          border-bottom: solid 7px #df8944;

          text-align:left;

          padding:1rem;

          > li

          {

            width:24%;

            padding-right:20px;

            margin-bottom:1rem;

            display:inline-block;

            vertical-align: top;

            position: relative;

            > a

            { 

              border-bottom:solid 1px gray;

              font-weight:bold;

            }

            > ul // this our 3rd level, or the 2nd level of pages shown in the mega nav

            {

              position:relative;

              display:block;

              left:0px;

              > li

              {

                a{

                  font-size:90%;

                }

                > ul // this is the 4th tier of content, which we will only show in the mobile nav view. 

                {

                  @include breakpoint(medium up)

                  {

                    display:none;

                  }

                }

              }

            }

          }

        }

      }

    }

    > ul > li

        {

          

          @include breakpoint(xlarge down)

          {

            max-width:15.5%;

          }

          text-align:center;

          > a

          {

            border-bottom:solid 7px $light-gray;

            padding-bottom:20px!important;

          }

      }

I have mine working delightfully. Thanks for the solution :blush:

Amazing news!!! No worries at all :slight_smile:

Great news… Thank you guys for amazing information