JQuery Mouse Leave get triggers when leaving child element - javascript

I want to have an underline effect(which is in my CSS) on my menu I can easily do this with hover, but my challenge is I have a sub-menu, and I want to retain this underline effect when I hover over the submenu.
My Approach is, when I hover the anchor tag, I would CSS class(set-yellow-highlight) for the underline, and when I leave that list item, I would remove that CSS class, but my problem is even if I just leave the anchor tag it already triggers the mouse leave on li.
Can someone explain this to me?
You can see my menu here:
HTML
<ul class="elementor-nav-menu">
<li class="menu-item">
<span>Menu 1</span>
</li>
<li class="menu-item">
<span>Menu 2</span>
</li>
<li class="menu-item">
<a><span class="set-highlight">Menu 3</span><span class="sub-arrow"><i class=""></i></span></a>
<ul class="sub-menu ">
<li><span>ITEM 1</span></li>
<li><span>ITEM 2</span></li>
<li><span>ITEM #</span></li>
</ul>
</li>
<li class="menu-item">
<a><span class="set-highlight">Menu 4</span><span class="sub-arrow"><i class=""></i></span></a>
<ul class="sub-menu ">
<li><span>ITEM 1</span></li>
<li><span>ITEM 2</span></li>
<li><span>ITEM #</span></li>
</ul>
</li>
</ul>
JQUERY:
<script>
$(document).ready(function() {
$('ul.elementor-nav-menu>li').mouseleave(function(){
$(this).find('.set-highlight').removeClass('set-yellow-higlight');
});
$('.elementor-nav-menu .set-highlight').hover(function(){
$(this).addClass('set-yellow-higlight');
});
});
</script>
CSS
.elementor-nav-menu>li a span:first-child{
position: relative;
z-index: 1;
}
.elementor-nav-menu>li a span:first-child:hover:before{
position: absolute;
content: '';
background: #ffd458;
width: 100%;
height: 10px;
bottom: 2px;
left: 0;
z-index: -1;
}
.elementor-nav-menu .set-yellow-higlight:before{
position: absolute;
content: '';
background: #ffd458;
width: 100%;
height: 10px;
bottom: 2px;
left: 0;
z-index: -1;
}

Related

Sidebar animation keeps playing on load

Have a sidebar on my website but when I load the page it plays the animation of it closing. how would I stop this?
I have a class #sidebar thats the class in its normal state and a class active that makes it move out
#sidebar {
margin-left: -250px;
width: 250px;
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 0;
background: #222222;
color: #fff;
transition: 0.3s;
visibility: hidden;
}
#sidebar.active {
width: 250px;
margin-left: 0px;
transition: 0.3s;
z-index: 999;
visibility: visible;
}
Javascript for changing the active class
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
UPDATE
Html code for the sidebar. if it helps I am using mustache js for templating if that is of importance to this
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Admin Panel</h3>
</div>
<ul class="list-unstyled components">
<p>Admin controls</p>
<li>
Menu's
<ul class="collapse list-unstyled" id="menuSubmenu">
<li>
Add
</li>
<li>
Edit
</li>
</ul>
</li>
<li>
Categories
<ul class="collapse list-unstyled" id="catSubmenu">
<li>
Add
</li>
<li>
Edit
</li>
</ul>
</li>
<li>
Dish's
<ul class="collapse list-unstyled" id="dishSubmenu">
<li>
Add
</li>
<li>
Edit
</li>
</ul>
</li>
<li>
Staff
<ul class="collapse list-unstyled" id="staffSubmenu">
<li>
Register
</li>
<li>
Delete
</li>
</ul>
</li>
<li>
Site settings
</li>
<li>
<a id="logout" href="/logout" class="btn btn-primary">Sign out</a>
</li>
</ul>
</nav>
Can you try below CSS
#sidebar {
position: absolute;
top: 0;
left: -250px;
bottom: 0;
width: 250px;
height: 100vh;
z-index: 999;
background: #222222;
color: #fff;
transition: 0.3s;
}
#sidebar.active {
left: 0;
}
Plus you have to pass active class to your sidebar also if you want to be active by default
<nav id="sidebar" class="active">

problem with the sidebar. sidebar is not closing

for some reason the close button on the sidebar is not showing nor working, the show sidebar works perfectly fine however the closing function is not working. im providing the html, css ans javascript related to the close function
here's my html:
<aside class="sidenav">
<div class="sidenav__close-icon">
<i class="bi bi-x-lg"></i>
</div>
<img class="sidenav__logo" src="../static/img/ManageX5.png">
<ul class="sidenav__list">
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('dashboard')}}">Dashboard</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('profile')}}">Profile</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('users')}}">Users</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('projects')}}">Projects</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('sites')}}">Sites</a>
</li>
</ul>
<ul class="sidenav__logout">
<li class="list-logout-item">
<a class="sidenav__list-item-logout" href="#">logout</a>
</li>
</ul>
</aside>
this is the JS part:
const menuIconEl = $('.menu-icon');
const sidenavEl = $('.sidenav');
const sidenavCloseEl = $('.sidenav__close-icon');
/*===== Add and remove provided class names =====*/
function toggleClassName(el, className) {
if (el.hasClass(className)) {
el.removeClass(className);
} else {
el.addClass(className);
}
}
/*===== Open the side nav on click =====*/
menuIconEl.on('click', function() {
toggleClassName(sidenavEl, 'active');
});
/*===== Close the side nav on click =====*/
sidenavCloseEl.on('click', function() {
toggleClassName(sidenavEl, 'active');
});
and this is the css related to the sidebar:
.sidenav__close-icon {
position: absolute;
visibility: visible;
top: 8px;
right: 12px;
cursor: pointer;
font-size: 20px;
color: #000;
}
The reason of why you can't see the close icon isn't showing up is that you don't have the necessary styles that makes the element (.sidenav__close-icon) to be rendered/shown as an icon.
If you have it somewhere in your project, I suggest you making some tweaks like the following:
You can use jQuery's toggleClass method to toggle a class
function toggleClassName(el, className) {
el.toggleClass(className);
}
The close button/icon has CSS properties (position, top, right) that makes it positioned to top right of the page which results in not visible. You may have to add the following CSS in order to give close icon a relative position. In your case, the relativity can be inherited from its parent, the .sidenav element.
.sidenav {
position: relative;
width: 200px;
}
.sidenav__close-icon {
position: absolute;
visibility: visible;
top: 8px;
right: 12px;
cursor: pointer;
font-size: 20px;
color: #000;
}
Here's a snippet which toggles active class and demonstrates the change
const menuIconEl = $('.menu-icon');
const sidenavEl = $('.sidenav');
const sidenavCloseEl = $('.sidenav__close-icon');
/*===== Add and remove provided class names =====*/
function toggleClassName(el, className) {
el.toggleClass(className);
// Much shorter, but the following lines can also work
/*if (el.hasClass(className)) {
el.removeClass(className);
} else {
el.addClass(className);
}*/
}
/*===== Open the side nav on click =====*/
menuIconEl.on('click', function () {
toggleClassName(sidenavEl, 'active');
});
/*===== Close the side nav on click =====*/
sidenavCloseEl.on('click', function () {
toggleClassName(sidenavEl, 'active');
});
.sidenav {
position: relative;
width: 200px;
}
.sidenav__close-icon {
position: absolute;
visibility: visible;
top: 8px;
right: 12px;
cursor: pointer;
font-size: 20px;
color: #000;
}
.active {
outline: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside class="sidenav">
<div class="sidenav__close-icon">
<i class="bi bi-x-lg">X</i>
</div>
<img class="sidenav__logo" src="../static/img/ManageX5.png">
<ul class="sidenav__list">
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('dashboard')}}">Dashboard</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('profile')}}">Profile</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('users')}}">Users</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('projects')}}">Projects</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('sites')}}">Sites</a>
</li>
</ul>
<ul class="sidenav__logout">
<li class="list-logout-item">
<a class="sidenav__list-item-logout" href="#">logout</a>
</li>
</ul>
</aside>

how to change height specific div when scroll inside this div

I need help in JS :
I have page with div class .maincom inside with overlay-y: scroll. I want to scroll this div, and when scrolling I want to change height of div class .maincom from 160 to 350 .
Important: I don't want to change height of this div when I'm scrolling entire site (window). I want to change this height ONLY when I'm scrolling this div class .maincom .
Example code:
<div class="maincom">
<ul class="nav nav-tabs">
<li class="active">
Comments</li></ul>
<h2>Your comment</h2>
<form>...</form>
</div>
CSS:
.maincom {
position: fixed;
background-color: white;
width: 100%;
bottom: 0px;
right: 0px;
height: 160px;
overflow-x: hidden;
overflow-y: scroll;
display: block;
clear: both;
background: white;
margin-bottom: 0px;
z-index: 4;
}
Div "maincom" is overlay-y:scroll, with height: 160px . I'm searching for solution: when maincom is scrolled down, then height will be 350px . When scrolled up, height will be back as 160px
This isn't working correctly :
$(".maincom").on("scroll", function () {
var scrollTop = $(".maincom").scrollTop();
if (scrollTop > 100) {
$(".maincom").stop().animate({height: "160px"},200);
}
else {
$(".maincom").stop().animate({height: "350px"},200);
}
});
Any other solutions? :)
First step is completed now. here is the second/last one:
Update: Solution from Lime In The Coconut working fully great. Thanks a lot ! Now I have one more thing:
Example code 2:
<div class="reward">You can win 50 points for that</div>
<div class="maincom">
<ul class="nav nav-tabs">
<li class="active">
Comments</li></ul>
<h2>Your comment</h2>
<form>...</form>
</div>
and code for .reward class div:
.reward{
position: fixed;
background-color: white;
width: 100%;
bottom: 140px;
right: -20px;
height: 64px;
overflow-x: hidden;
overflow-y: scroll;
display: block;
clear: both;
background: white;
margin-bottom: 20px;
z-index: 5;
background-color: #0077dd;
color: white;
font-size: 10px;
opacity: 0.8;
}
And now: how to set JS - if .maincom is scrolled down (then height of .maincom increased) , bottom of .reward is increased from 140px to 300px .
if You know solution for that too, You are the best ! :)
Thanks !
Peter
try this, i have inserted more list elements in order to see the effects
let maincom = document.querySelector('.maincom')
maincom.addEventListener('scroll',function(){
if(this.scrollTop>0){
this.style.height ="360px"
}
if(this.scrollTop === 0){
this.style.height = '160px'
}
})
.maincom {
position: fixed;
background-color: red;
width: 100%;
height: 160px;
overflow-x: hidden;
overflow-y: scroll;
display: block;
clear: both;
background: white;
margin-bottom: 0px;
z-index: 4;
}
<div class="maincom">
<ul class="nav nav-tabs">
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
</ul>
<h2>Your comment</h2>
<form>...</form>
</div>

How can I move an absolute positioned element if out of viewport?

I have many boxes with differents widths. All of them are displayed inline-block so they will be distributed differently as window width changes.
Every box has a big tooltip that will show on hover. These tooltips have a fixed width and height, same for all of the boxes.
These tooltips are position:absolute over the boxes and centered with:
left: 50%;
margin-left: -halfwidth;
My problem is that if the box is close to window left or right they will be partially hidden (I have no problem with top and bottom, they will never reach those edges)
Is there any easy way with javascript (better if jquery) to detect when the element is out of the viewport and then change the left property accordingly to prevent it?
any help, hint or comment will be greatly apreciated. Thank You
JSFIDDLE
html, body {margin:0;padding:0;height:100%;}
ul {
width:100%;
text-align:center;
position:relative;
top:50%;
transform:translateY(-50%);
padding:0;
}
li {
display: inline-block;
background-color: red;
width: 100px;
height: 25px;
margin-right: 10px;
position: relative;
}
.hover-element {
position: absolute;
background-color: yellow;
z-index: 9999;
width: 350px;
height: 175px;
left: 50%;
margin-left: -175px;
bottom:25px;
display: none;
border:1px solid #000;
}
li:hover .hover-element {
display: block;
}
.hover-element:hover {
visibility: hidden;
}
<ul>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
</ul>
Thats all you need, i detected the offset left position of the div, and added the class to li and a small tweaks in css.
$("li").mouseenter(function(){
var f = $(this).find('.hover-element');
var rightEdge = f.width() + f.offset().left;
var leftEdge = f.offset().left;
var screenWidth = $(window).width();
if(leftEdge < 0){
$(this).addClass("left");
$(this).removeClass("right");
}
else if(rightEdge > screenWidth){
$(this).addClass("right");
$(this).removeClass("left");
}
else{
$(this).removeClass("right lefft");
}
});
$("li").mouseleave(function(){
$(this).removeClass("right lefft");
})
html, body {margin:0;padding:0;height:100%;}
ul {
width:100%;
text-align:center;
position:relative;
top:50%;
transform:translateY(-50%);
padding:0;
}
li {
display: inline-block;
background-color: red;
width: 100px;
height: 25px;
margin-right: 10px;
position: relative;
}
.hover-element {
position: absolute;
background-color: yellow;
z-index: 9999;
width: 350px;
height: 175px;
left: 50%;
margin-left: -175px;
bottom:25px;
display: none;
border:1px solid #000;
}
li.left .hover-element{
left: 0;
margin-left: 0;
}
li.right .hover-element{
margin-left: 0;
left: auto;
right: 0;
}
li:hover .hover-element {
display: block;
}
.hover-element:hover {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
</ul>
Have a look:
var windowWidth = document.body.scrollWidth || window.innerWidth;
$('li').on('mouseenter', function(e){
var $hover = $(this).find('.hover-element');
var coords = $hover[0] && $hover[0].getBoundingClientRect();
var rightDistance = 0;
if (coords.left <= 0) {
$hover.css({
'left': ($hover.css('left').split('px')[0] - coords.left) + 'px'
})
}
rightDistance = windowWidth - coords.left - $hover.width() - 2 * $hover.css('borderWidth').split('px')[0];
if (rightDistance < 0) {
$hover.css({
'left': ($hover.css('left').split('px')[0] - (-rightDistance)) + 'px'
})
}
$('p').html($hover.css('left') + '/' + coords.left)
})
html, body {margin:0;padding:0;height:100%;overflow-x: hidden;}
ul {
width:100%;
text-align:center;
position:relative;
top:50%;
transform:translateY(-50%);
padding:0;
}
li {
display: inline-block;
background-color: red;
width: 100px;
height: 25px;
margin-right: 10px;
position: relative;
}
.hover-element {
position: absolute;
background-color: yellow;
z-index: 9999;
width: 350px;
height: 175px;
left: 50%;
margin-left: -175px;
bottom:25px;
display: none;
border:1px solid #000;
}
li:hover .hover-element {
display: block;
}
.hover-element:hover {
visibility: hidden;
}
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<ul>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
</ul>
The following links are a starting point for your question (if not the actual answer).
Is there any easy way with javascript (better if jquery) to detect when the element is out of the viewport and then change the left property accordingly to prevent it?
How to tell if a DOM element is visible in the current viewport?
Absolute position of an element on the screen using jQuery
I'm going to mention the steps here. If you'd need the code, just ask for it. I am currently on my mobile device, so typing the code would get hard!
Steps
To make things easy to include JS, change the display property using JS. Accomplish this using a mouse event on each of the list items, that changes their respective tooltip's display property. (Here's how to access the respective child)
In the same hover event, do these:
After changing the display, check if the tooltip element is in viewport. You can refer to the link Victor Medeiros provided.
If is not completely in viewport, change the margin-left property to -175px - (the number of pixels it crossed the boundary by). I just realised, if it crosses the viewport, just set the margin-left or margin-right (as applicable, find it by getBoundingClientRect) to 0.
Yep, that's it! I hope that should work, I haven't tried it out. What's the result?
Change
li {
display: inline-block;
background-color: red;
width: 100px;
height: 25px;
margin-right: 10px;
position: relative;
}
Whit
li {
display: inline-block;
background-color: red;
width: 100px;
height: 25px;
margin-right: 10px;
position: static;
}

jQuery using tab to go through dropdown menu links (keyboard accessibility)

I have a css menu I would like to make accessible through keyboard interaction. I want to be able to tab through each link including sub menu links.
If the dropdown focus moves on to the next parent link dropdown then the previous dropdown should hide.
Updated Fiddle
HTML
<ul>
<li class="custom-MainMenu-TopNav-li">
<div>
<span>Parent link 1</span>
<div>
<ul class="custom-MainMenu-SubNav-dropdown">
<li>Sub Link</li>
<li>Sub Link</li>
</ul>
</div>
</div>
</li>
<li class="custom-MainMenu-TopNav-li">
<div>
<span>Parent link 2</span>
<div>
<ul class="custom-MainMenu-SubNav-dropdown">
<li>Sub Link</li>
<li>Sub Link</li>
</ul>
</div>
</div>
</li>
</ul>
JavaScript
accessibleDropdown();
function accessibleDropdown(){
jQuery('.custom-MainMenu-TopNav-li a').each(function(){
jQuery(this).focus(function(){
jQuery(this).addClass('focused');
var menuParent = jQuery(this).parent().next().find('ul');
jQuery(menuParent).css('display','block');
});
jQuery(this).blur(function(){
jQuery(this).removeClass('focused');
});
});
}
I am not sure what is your desired outcome and need for this result, but hopefully this will help you out.
I had to redo your example due to naming convention and approach, but I assume this is what you wanted...
Here's a demo, just in case...
JSFiddle
HTML
<ul class="navbar">
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
</ul>
CSS
body {
margin: 10px;
}
.navbar,
.navbar .navbar-sub {
list-style: none;
margin: 0;
padding: 0;
}
.navbar > .navbar-item {
float: left;
}
.navbar > .navbar-item:last-child {
margin-right: 0;
}
.navbar > .navbar-item.active > .navbar-sub {
display: block;
}
.navbar > .navbar-item a {
text-decoration: none;
}
.navbar > .navbar-item > a {
background-color: #999;
padding: 10px 20px;
color: #696969;
display: block;
}
.navbar > .navbar-item > a:hover,
.navbar > .navbar-item > a:focus,
.navbar > .navbar-item.active > a {
background-color: #ccc;
}
.navbar .navbar-sub {
display: none;
}
.navbar .navbar-sub > .navbar-sub-item > a {
color: #ccc;
display: block;
padding: 5px 10px;
text-align: center;
background-color: #696969;
}
.navbar .navbar-item.active .navbar-sub-item > a:hover,
.navbar .navbar-item.active .navbar-sub-item > a:focus {
background-color: #999;
}
jQuery
$('.navbar').on('mouseenter focusin', '.navbar-item > a', function () {
$(this)
.parent('.navbar-item')
.addClass('active')
.siblings('.navbar-item')
.removeClass('active')
});
here you go, simple jquery :)
// display drop down box when mouse is over
$(".custom-MainMenu-TopNav-li a").mouseover(function(){
$(this).find(".custom-MainMenu-SubNav-dropdown").css("display", "block");
});
// hide drop down box when mouse leaves
$(".custom-MainMenu-TopNav-li a").mouseleave(function(){
$(this).find(".custom-MainMenu-SubNav-dropdown").css("display", "none");
});
This basically displays/hide each the dropdown when the mouse is over/leaves the parent div.
I don't think it would be a good idea to display the dropbown menu on focus, cause i believe you can only focus on certain elements like inputs.
Hope this helps!

Categories