Sanjeev K Sanjeev K - 3 months ago 12
CSS Question

Can't move cursor to submenu on mouseover

I have a menu with sub menu created, and only thing I did is sub menu is placed outside the

UL
(because I had no choice), the problem is I can't move cursor to sub menu, I tried to check if there is any disconnect with menu and sub menu, but no clue..

Here is the JSFiddle working demo

CSS

<style>
.nav{ float: right; margin: 22px 0 0; padding: 0; }
.nav ul{ float: right; margin: 0; padding: 0; font-size: 16px; }
.nav ul li{ float: left; margin: 0; padding: 0; /*position: relative;*/ display:block; padding:0 0 40px 0;}
.nav > ul > li > a{ color: #771521; padding:8px 15px 8px 15px; }
.nav ul li a:hover{text-decoration: underline;}

/*-----------Sub menu -----------*/
.submenu_willwid{position:absolute; width:100%; background:rgba(0,0,0,0.65); top:90px; padding:10px; box-sizing:border-box; display:none; z-index:101; min-height:195px; box-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.68); left:0;}
.menu_inner{width:100%; max-width:1200px; margin:0 auto;}
.submenu_col_full{width:20%; float:left;}
.submenu_col_full > h4{font-size:14px; color:#fff; text-transform:uppercase; font-weight:400; text-align:center; padding:0 0 10px 0;}
.submenu_col_full > h4 > a{color:#fff; text-decoration:none;}
.submenu_willwid:after, .submenu_willwid:before {bottom: 100%; left: 51.5%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;}
.submenu_willwid:after {border-color: rgba(0, 0, 0, 0);border-bottom-color: rgba(0, 0, 0, 0.68); border-width: 12px; margin-left: -12px;}
.submenu_willwid2:after, .submenu_willwid2:before {bottom: 100%; left: 59%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;}
.submenu_willwid2:after {border-color: rgba(0, 0, 0, 0);border-bottom-color: rgba(0, 0, 0, 0.68); border-width: 12px; margin-left: -12px;}
</sryle>


HTML

<nav class="nav animated fadeInUp m1">
<ul>
<li id="menu1"> <a href="javascript:;">About Us</a> </li>
<li id="menu2"><a href="companies.html">Our Group Companies</a></li>
<li><a href="#">Investor Relations</a></li>
<li><a href="#">Social Responsibility</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Media/News</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<div class="submenu_willwid" id="submenu1">
<div class="menu_inner">
<div class="submenu_col_full">
<div class="rot_box">
<div class="rot_box_inner"><a href="company-at-glance.html"><img src="images/menu-tri-1.png">
<div class="hov"></div>
</a></div>
</div>
<h4><a href="company-at-glance.html">company at a Glance</a></h4>
</div>
<div class="submenu_col_full">
<div class="rot_box">
<div class="rot_box_inner"><a href="vision.html"><img src="images/menu-tri-2.png">
<div class="hov"></div>
</a></div>
</div>
<h4><a href="vision.html">Vision and Mission</a></h4>
</div>
<div class="submenu_col_full">
<div class="rot_box">
<div class="rot_box_inner"><a href="history.html"><img src="images/menu-tri-3.png">
<div class="hov"></div>
</a></div>
</div>
<h4><a href="history.html">Our History</a></h4>
</div>
<div class="submenu_col_full">
<div class="rot_box">
<div class="rot_box_inner"><a href="our-strategy.html"><img src="images/menu-tri-4.png">
<div class="hov"></div>
</a></div>
</div>
<h4><a href="our-strategy.html">Our Strategy</a></h4>
</div>
<div class="submenu_col_full">
<div class="rot_box">
<div class="rot_box_inner"><a href="board-members.html"><img src="images/menu-tri-5.png">
<div class="hov"></div>
</a></div>
</div>
<h4><a href="board-members.html">Board Members</a></h4>
</div>
</div>
</div>
<div class="submenu_willwid submenu_willwid2" id="submenu2">
<div class="menu_inner">
<div class="submenu_col_full">
<div class="rot_box">
<div class="rot_box_inner"><a href="company-at-glance.html"><img src="images/menu-tri-1.png">
<div class="hov"></div>
</a></div>
</div>
<h4><a href="company-at-glance.html">company at a Glance 2</a></h4>
</div>
<div class="submenu_col_full">
<div class="rot_box">
<div class="rot_box_inner"><a href="vision.html"><img src="images/menu-tri-2.png">
<div class="hov"></div>
</a></div>
</div>
<h4><a href="vision.html">Vision and Mission</a></h4>
</div>
<div class="submenu_col_full">
<div class="rot_box">
<div class="rot_box_inner"><a href="history.html"><img src="images/menu-tri-3.png">
<div class="hov"></div>
</a></div>
</div>
<h4><a href="history.html">Our History</a></h4>
</div>
<div class="submenu_col_full">
<div class="rot_box">
<div class="rot_box_inner"><a href="our-strategy.html"><img src="images/menu-tri-4.png">
<div class="hov"></div>
</a></div>
</div>
<h4><a href="our-strategy.html">Our Strategy</a></h4>
</div>
<div class="submenu_col_full">
<div class="rot_box">
<div class="rot_box_inner"><a href="board-members.html"><img src="images/menu-tri-5.png">
<div class="hov"></div>
</a></div>
</div>
<h4><a href="board-members.html">Board Members</a></h4>
</div>
</div>
</div>


JQuery

$('#menu1').mouseover(function(){
$('#submenu1').fadeIn();
});
$('#menu1').mouseleave(function(){
$('#submenu1').fadeOut();
});

//Menu 2
$('#menu2').mouseover(function(){
$('#submenu2').fadeIn();
});
$('#menu2').mouseleave(function(){
$('#submenu2').fadeOut();
});

Answer

Your code for mouseenter and mouseleave event should be as mentioned below. here stop() method use for stop running animation.

//Menu 1
$('#menu1, #submenu1').mouseover(function(){
    $('#submenu1').stop().fadeIn();
});
$('#menu1, #submenu1').mouseleave(function(){
    $('#submenu1').stop().fadeOut();
});

//Menu 2
$('#menu2, #submenu2').mouseover(function(){
    $('#submenu2').stop().fadeIn();
});
$('#menu2, #submenu2').mouseleave(function(){
    $('#submenu2').stop().fadeOut();
});

Check jsfiddle https://jsfiddle.net/qsyg958b/14/