Hey there! I have been working with a drop-down menu on various websites without any issues, but for some reason, it's acting up in this specific application (). The menu seems to flicker and is not properly positioned in Firefox and IE8-10, although it works fine in Chrome and Safari. Any thoughts on what might be causing this? I suspect it could be a CSS problem, but I'm struggling to pinpoint the issue.
Thanks in advance for any assistance!
Here is the JavaScript code that I am currently using for the menu:
//Adding required classes to the navigation
$('ul.level-1 > li > ul').addClass('level-2');
$('ul.level-1 ul > li ul').addClass('level-3');
$('li:has(> ul)').addClass('has-subnav');
// Mobile Navigation
$('body').addClass('js');
var $menu = $('#menu'),
$menulink = $('.menu-link'),
$menuTrigger = $('.has-subnav > a');
$menulink.click(function(e) {
//e.preventDefault();
$menulink.toggleClass('active');
$menu.toggleClass('active');
});
$menuTrigger.click(function(e) {
if ( $(window).width() < 768) {
e.preventDefault();
}
var $this = $(this);
$this.toggleClass('active').next('ul').toggleClass('active');
});
//Removing active class on desktop version
$('ul.level-1 > li').hover(
function () {
$('ul.level-1 > li').removeClass('active');
var $this = $(this);
if( $this.children('ul.level-2').css('display') != 'none' ) {
$this.addClass('active');
} else {
$this.removeClass('active');
}
},
function () {
var $this = $(this);
if( $this.children('ul.level-2').css('display') != 'none' ) {
$this.addClass('active');
} else {
$this.removeClass('active');
}
}
);