I created the menu bar with rolldown menu. This short code should hide this rolldown menu (.rolldown-menu) and turn off the button (.rolldown-button) when mouse leaves the button with the exception when mouse is over the rolldown menu. All works fine with Chrome and Opera, but doesn't with FF and IE. In FF $(".rolldown-menu:hover").length is always 0. Can someone see something what I'm doing wrong?
$(".rolldown-button").mouseleave(function() {
var hovered = $(".rolldown-menu:hover").length;
if ( hovered > 0) {
} else {
$(".rolldown-menu").removeClass("active");
$(".rolldown-button").removeClass("active");
}
});
The structure of html looks like this:
<header class="head">
<!--...-->
<nav class="nav-bar">
<ul class="main-menu">
<li class="menu-item rolldown-button">
<a href="#">item 1</a>
</li>
<li class="menu-item">
<a href="#">item 2</a>
</li>
<li class="menu-item">
<a href="#">item 3</a>
</li>
<li class="menu-item active">
<a href="#">item 4</a>
</li>
</ul>
</nav>
</header>
<!--...-->
<div class="rolldown-menu navbar-fixed-top hidden-xs">
<div class="container">
<div class="row">
<div class="col-sm-3">
<ul>
<li class="menu-item active">
<a href="#">submenu - items...</a>
</li>
<!--...-->