Mega Menu always open

Hi, I'm having an issue with the mega menu, basically when the site loads the mega menu is expanded until I hover over it for a while and then it goes away. Code is as follows:

					<nav id="primary-menu">

						<ul>
							<li class="<check if="{{ @thepage=='home' }}"><true>current</true></check>" style="margin-left: 0px !important; margin-right: 0px !important;"><a href="/"><div><i class="icon-home" style="margin-right: 0px !important;"></i></div></a>
							</li>
							<li class="<check if="{{ @thepage=='aboutus' }}"><true>current</true></check>"><a href="/about-us"><div>About Us</div></a>
							</li>
							<li class="mega-menu<check if="{{ @thepage=='quizzes' }}"><true> current</true></check>"><a href="#"><div>Our Quizzes</div></a>
								<div class="mega-menu-content style-2 clearfix">								
{{@MENU | raw}}
								</div>
							</li>
							<li class="<check if="{{ @thepage=='events' }}"><true>current</true></check>"><a href="/quiz-nights"><div>Coming Up</div></a>
							</li>
							<li class="<check if="{{ @thepage=='yourquiz' }}"><true>current</true></check>"><a href="/your-quiz"><div>Your Quiz</div></a>
							</li>
							<li class="<check if="{{ @thepage=='gallery' }}"><true>current</true></check>"><a href="/gallery"><div>Gallery</div></a>
							</li>
							<li class="<check if="{{ @thepage=='contactus' }}"><true>current</true></check>"><a href="/contact-us"><div>Contact</div></a>
							</li>

						</ul>
					</nav>

Any ideas?

Wont let me edit and I pasted the wrong code..

<nav id="primary-menu">
    <ul>
        <li class="current" style="margin-left: 0px !important; margin-right: 0px !important;"><a href="/"><div><i class="icon-home" style="margin-right: 0px !important;"></i></div></a>
        </li>
        <li class=""><a href="/about-us"><div>About Us</div></a>
        </li>
        <li class="mega-menu"><a href="#"><div>Our Quizzes</div></a>
            <div class="mega-menu-content style-2 clearfix">								
                <ul class="mega-menu-column col-lg-3">
                    <li>
                        <div class="widget clearfix">
                            <div class="ipost clearfix">
                                <div class="entry-image">
                                    <a href="/link1">
                                            <img src="img.jpg" alt="">
                                    </a>
                                </div>
                                <div class="entry-title">
                                    <h3><a href="/link1">Link 1</a></h3>
                                </div>

                            </div>
                        </div>

                    </li>
                </ul>									
				<ul class="mega-menu-column col-lg-3">
                    <li>
                        <div class="widget clearfix">
                            <div class="ipost clearfix">
                                <div class="entry-image">
                                    <a href="/link2">
                                            <img src="img2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="entry-title">
                                    <h3><a href="/link2">Link 2</a></h3>
                                </div>

                            </div>
                        </div>

                    </li>
                </ul>
				<ul class="mega-menu-column col-lg-3">
                    <li>
                        <div class="widget clearfix">
                            <div class="ipost clearfix">
                                <div class="entry-image">
                                    <a href="/link3">
                                            <img src="link3.jpg" alt="">
                                    </a>
                                </div>
                                <div class="entry-title">
                                    <h3><a href="/link3">Link 3</a></h3>
                                </div>

                            </div>
                        </div>

                    </li>
                </ul>
				<ul class="mega-menu-column col-lg-3">
                    <li>
                        <div class="widget clearfix">
                            <div class="ipost clearfix">
                                <div class="entry-image">
                                    <a href="/link4">
                                            <img src="img4.jpg" alt="">
                                    </a>
                                </div>
                                <div class="entry-title">
                                    <h3><a href="/link1">Link 4</a></h3>
                                </div>

                            </div>
                        </div>

                    </li>
                </ul>
            </div>
        </li>
        <li class=""><a href="/quiz-nights"><div>Coming Up</div></a>
        </li>
        <li class=""><a href="/your-quiz"><div>Your Quiz</div></a>
        </li>
        <li class=""><a href="/gallery"><div>Gallery</div></a>
        </li>
        <li class=""><a href="/contact-us"><div>Contact</div></a>
        </li>
    </ul>
</nav>

Sort of answering my own question here, but figure it might help others if they have the same issue.

It would appear the issue was with my cookie consent manager I was using (https://www.consentmanager.net/). Took out the JS and the mega menu works pretty much perfectly (it appears briefly on page load).