We Keep Coding

How to make it so that when you click on the button again, it hides its menu

How to make it so that when you click on the button again, it hides its menu
The script works so that when opening another "btn", the one that is active is hidden, + if you click outside the menu field, all are hidden.
How do I make it so that when I click on the active button again, its menu is hidden
<ul class="first_menu">
<li class="menu_item">
<button class="menu_btn">1 btn</button>
<div class="dropdown">
<ul class="dropdown__list">
<li class="dropdown__item">
1 Подпункт
</li>
<li class="dropdown__item">
2 Подпункт
</li>
<li class="dropdown__item">
3 Подпункт
</li>
</ul>
</div>
</li>
<li class="menu_item">
<button class="menu_btn">2 btn</button>
<div class="dropdown">
<ul class="dropdown__list">
<li class="dropdown__item">
1 Подпункт
</li>
<li class="dropdown__item">
2 Подпункт
</li>
<li class="dropdown__item">
3 Подпункт
</li>
</ul>
</div>
</li>
<li class="menu_item">
<button class="menu_btn">3 btn</button>
<div class="dropdown">
<ul class="dropdown__list">
<li class="dropdown__item">
1 Подпункт
</li>
<li class="dropdown__item">
2 Подпункт
</li>
<li class="dropdown__item">
3 Подпункт
</li>
</ul>
</div>
</li>
</ul>
.first_menu {
position: relative;
justify-content: center;
display: flex;
}
.menu_item,.dropdown__item {
list-style-type: none;
}
.menu_btn {
cursor: pointer;
border: none;
padding: 25px;
background-color: black;
color: #ffffff;
font-weight: bold;
}
.dropdown {
transition: all 1s;
position: absolute;
top: 0;
transform: translateY(-100%);
background-color: black;
}
.dropdown__item {
text-align: center;
padding-bottom: 20px;
}
.dropdown__link {
text-decoration: none;
color: white;
font-weight: bold;
}
.active {
top: 100px;
transition: all 1s;
transform: translateY(-30%);
}
const btn = document.querySelectorAll('.menu_btn')
btn.forEach(function(item, i){
item.addEventListener('click', (e) => {
let currentBtn = e.currentTarget;
let nextElemt = currentBtn.nextElementSibling;
document.querySelectorAll('.dropdown.active').forEach(function(item, i) {
item.classList.remove('active')
})
nextElemt.classList.add('active')
const menuOff = document.querySelector('.first_menu');
document.addEventListener('click', function(e) {
const click = e.composedPath().includes(menuOff);
if(!click) {
nextElemt.classList.remove('active')
}
})
})
})

Check whether the associated dropdown's classList contains the class that opens the dropdown. If it does, then instead of adding the class, remove it - by using classList.toggle.
You should also not be adding an event listener to the document every time there's a click. Add one unconditionally, once, on pageload, and check if the click is inside the .first-menu to determine whether you need to remove the active dropdowns.
const removeActive = () => {
document.querySelector('.dropdown.active')?.classList.remove('active');
};
for (const button of document.querySelectorAll('.menu_btn')) {
button.addEventListener('click', (e) => {
const thisDropdown = e.currentTarget.nextElementSibling;
const thisCurrentlyOpen = thisDropdown.classList.contains('active');
removeActive();
thisDropdown.classList.toggle('active', !thisCurrentlyOpen);
})
}
document.addEventListener('click', function(e) {
if (!e.target.closest('.first_menu')) {
removeActive();
}
});
const removeActive = () => {
document.querySelector('.dropdown.active')?.classList.remove('active');
};
for (const button of document.querySelectorAll('.menu_btn')) {
button.addEventListener('click', (e) => {
const thisDropdown = e.currentTarget.nextElementSibling;
const thisCurrentlyOpen = thisDropdown.classList.contains('active');
removeActive();
thisDropdown.classList.toggle('active', !thisCurrentlyOpen);
})
}
document.addEventListener('click', function(e) {
if (!e.target.closest('.first_menu')) {
removeActive();
}
});
.first_menu {
position: relative;
justify-content: center;
display: flex;
}
.menu_item,
.dropdown__item {
list-style-type: none;
}
.menu_btn {
cursor: pointer;
border: none;
padding: 25px;
background-color: black;
color: #ffffff;
font-weight: bold;
}
.dropdown {
transition: all 1s;
position: absolute;
top: 0;
transform: translateY(-100%);
background-color: black;
}
.dropdown__item {
text-align: center;
padding-bottom: 20px;
}
.dropdown__link {
text-decoration: none;
color: white;
font-weight: bold;
}
.active {
top: 100px;
transition: all 1s;
transform: translateY(-30%);
}
<ul class="first_menu">
<li class="menu_item">
<button class="menu_btn">1 btn</button>
<div class="dropdown">
<ul class="dropdown__list">
<li class="dropdown__item">
1 Подпункт
</li>
<li class="dropdown__item">
2 Подпункт
</li>
<li class="dropdown__item">
3 Подпункт
</li>
</ul>
</div>
</li>
<li class="menu_item">
<button class="menu_btn">2 btn</button>
<div class="dropdown">
<ul class="dropdown__list">
<li class="dropdown__item">
1 Подпункт
</li>
<li class="dropdown__item">
2 Подпункт
</li>
<li class="dropdown__item">
3 Подпункт
</li>
</ul>
</div>
</li>
<li class="menu_item">
<button class="menu_btn">3 btn</button>
<div class="dropdown">
<ul class="dropdown__list">
<li class="dropdown__item">
1 Подпункт
</li>
<li class="dropdown__item">
2 Подпункт
</li>
<li class="dropdown__item">
3 Подпункт
</li>
</ul>
</div>
</li>
</ul>

How to show dropdown menu when clicked

js
const navItems = document.querySelectorAll('.navbar__items')
const dropDown = document.querySelectorAll('.dropdown')
dropDown.forEach(element => {
element.addEventListener('click',()=>{
{
navItems.forEach(nav =>{
nav.classList.toggle('drop')
})
}
})
})
HTML
<ul class="navbar">
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
</ul>
CSS
.navbar{
position: relative;
}
.navbar__items{
position: absolute;
display: none;
}
.drop{
display: block;
}
I have a navbar and each of these navbar items have dropdown items. I want to show these dropdown items when I click on the 'dropdown' class. But the problem is when I click on one of them all the dropdowns are visible. How do I show only the list I've clicked on?

Enter the below code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Click</button>
<div id="myDropdown" class="dropdown-content">
Clicked
Clicked
Clicked
</div>
</div>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>

As mentioned in comments it is better to use Event Delegation technique.
The algorithm is quite simple:
Add listener on the parent element
On click check if dropdown-opener was clicked
Get drop-down which I need to open
Close other dropdowns
Open dropdown from 3.
const allDropdowns = document.querySelectorAll('.navbar__items')
const DROP_CLASS = 'drop';
const navbar = document.querySelector('.navbar');
navbar.addEventListener('click', ({target}) => {
if (!target.classList.contains('dropdown')) return;
const parent = target.parentNode;
const navItems = parent
.querySelector('.navbar__items');
allDropdowns.forEach(el => el !== navItems && el.classList.remove(DROP_CLASS));
if (navItems) {
navItems.classList.toggle(DROP_CLASS);
}
});
.navbar{
position: relative;
}
.navbar__items{
position: absolute;
left: 80px;
display: none;
}
.drop{
display: block;
}
<ul class="navbar">
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
</ul>

Use the event target to get the parentNode, then use the parentNode to query the hidden element as all your elements are grouped in the same parent/child grouping. Also you can set an initial class for hidden, display: none; in each element and add it on click. A forEach loop sets each elements display to none using the hidden class on click.
const navItems = document.querySelectorAll('.navbar__items')
const dropDown = document.querySelectorAll('.dropdown')
// callback function that passes in the event => e from your listener
function showDropdown (e){
// set each navbar__items element display: none using hidden class
navItems.forEach(el => el.classList.add('hidden'))
// query the specific .navbar__items in the event.targets group
let dd = e.target.parentNode.querySelector('.navbar__items')
// remove the hidden class a nd show the dropdown for this event.target
dd.classList.remove('hidden')
}
// iterate over the dropdown element
dropDown.forEach(element => {
// function showDropdown on click
element.addEventListener('click', showDropdown)
})
.navbar {
position: relative;
}
.navbar__items {
position: absolute;
left: 75px;
}
.hidden {
display: none;
}
<ul class="navbar">
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items hidden">
<li>clicked 1</li>
<li>clicked 1</li>
<li>clicked 1</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items hidden">
<li>clicked 2</li>
<li>clicked 2</li>
<li>clicked 2</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items hidden">
<li>clicked 3</li>
<li>clicked 3</li>
<li>clicked 3</li>
</ul>
</li>
</ul>

Rather than using addEventlistener you should add onclick method in html to every drop-down with same method name but change the ul class name with for each drop-down and then pass class name in method and then toggle the drop-down with parameter class name.
For example,
function onClick(item) {
if (document.getElementsByClassName(item).classList.contains('hidden')) {
document.getElementsByClassName('dropdown').classList.remove('hidden');
}
if (!document.getElementsByClassName(item)[0].classList.contains('hidden')) {
document.getElementsByClassName('dropdown').classList.add('hidden');
}
}
<ul class="navbar">
<li class="nav-menu">
<div class="dropdown" onclick="onClick('navbar_items1')">click</div>
<ul class="navbar__items1 hidden">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown" onclick="onClick('navbar_items2')">click</div>
<ul class="navbar__items2 hidden">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown" onclick="onClick('navbar_items3')">click</div>
<ul class="navbar__items3 hidden">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
</ul>

Elements grid arranging CSS

I am trying to achieve a scenario: when you click on a box, it shows a "long box" (full width) in the next row. The problem is that I get a gap after the clicked object.
Is it possible show the "long box" in the next row without changing the structure of the small boxes using CSS?
Link to jsfiddle: jsfiddle.net/mhLv7zj1/
$(document).ready(function(){
$(".box").click(function(){
$(this).next('.open').toggleClass('toggled');
});
$(".open").click(function(){
$(this).toggleClass('toggled');
});
})

Here's one option. You can remove all the li class="open" from your HTML and instead have this algorithm on each click:
hide/remove any already open items
calculate the number of items in the flex row where the item that was clicked lives and its position
then you'll know where to make the insertion, so: at the end of this row, dynamically insert an open item (style it in advance so that it takes up an entire row (flex: 0 0 100%;)

Use flex and flex-basis properties.
$(document).ready(function() {
$(".box").click(function() {
$(this).next('.open').toggleClass('toggled');
});
$(".open").click(function() {
$(this).toggleClass('toggled');
});
})
ul {
display: flex;
list-style: none;
flex-direction: row;
flex-wrap: wrap;
}
.box {
background: blue;
height: 80px;
flex: 1 1 32%;
margin-right: 2px;
margin-bottom: 2px;
}
.open {
display: none;
background: red;
width: 100%;
height: 80px;
}
.toggled {
display: flex;
flex-basis: 66.5%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<ul>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
</ul>

The problem is that the red boxes are siblings of the blue boxes so when you make them display:block they push the other content around. You need to make the red boxes children of the blue boxes and use relative positioning to achieve your desired result.
let boxes = document.querySelectorAll('ul > li');
boxes.forEach(b => {
b.addEventListener('click', expand.bind(b));
});
function expand() {
this.querySelector('.open').classList.toggle('visible');
}
ul {
width: 100%;
display: flex;
flex-flow: row wrap;
list-style-type: none;
margin: 0;
padding: 0;
}
li {
position: relative;
flex-basis: 33%;
height: 150px;
background: blue;
border: 1px solid white;
}
div.open {
display: none;
position: relative;
top: calc(100% + 1px);
left: -1px;
width: calc(300% + 4px);
height: 150px;
border: 1px solid white;
background: red;
z-index: 1;
}
.visible {
display: block!important;
}
<ul>
<li> <div class="open"></div> </li>
<li> <div class="open"></div> </li>
<li> <div class="open"></div> </li>
<li> <div class="open"></div> </li>
<li> <div class="open"></div> </li>
<li> <div class="open"></div> </li>
<li> <div class="open"></div> </li>
<li> <div class="open"></div> </li>
</ul>
PS. This example isn't a perfect fixed replica of your code but it should get you on the right track.

How to look up data from an ul li?

My error that I present in adding a data search engine from a tags in specifies (ul -> li) is:
when I add a text in the search engine, the search input disappears
jQuery.fn.filterByText = function(textbox) {
return this.each(function() {
var select = this;
var options = [];
$(select).find('li').each(function() {
options.push({
value: $(this).val(),
text: $(this).text()
});
});
$(select).data('options', options);
$(textbox).bind('change keyup', function() {
var options = $(select).empty().data('options');
var search = $.trim($(this).val());
var regex = new RegExp(search, "gi");
$.each(options, function(i) {
var option = options[i];
if (option.text.match(regex) !== null) {
$(select).append(
$('<li>').text(option.text).val(option.value)
);
}
});
});
});
};
/*$(function() {
$('.options').filterByText($('input'));
});*/
.container {
display: flex;
flex-wrap: wrap;
width: 25%;
}
.selected {
border: thin solid darkgray;
border-radius: 5px;
background: lightgray;
display: flex;
align-items: center;
cursor: pointer;
height: 1.5em;
margin-bottom: .2em;
padding-left: .5em;
min-width: 150px;
position: relative;
}
.selected:after {
font-family: FontAwesome;
content: "\f0d7";
margin-left: 1em;
position: absolute;
right: .5em;
}
/*
.options {
display: none;
margin: 0;
padding: 0;
}
.options.open {
display: inline-block;
}
*/
li {
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
}
li.search {
padding: 0.5rem 0;
}
li>img {
margin-right: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form>
<input type="hidden" id="sel">
<div class="container">
<div class="selected">Select an option</div>
<ul class="options">
<li class="search"><input type="text" id="search"></li>
<li class="option"><span>Option 1</span></li>
<li class="option"><span>Option 2</span></li>
<li class="option"><span>Option 3</span></li>
<li class="option"><span>Option 4</span></li>
<li class="option"><span>Option 5</span></li>
<li class="option"><span>Option 6</span></li>
<li class="option"><span>Option 7</span></li>
<li class="option"><span>Option 8</span></li>
<li class="option"><span>Option 9</span></li>
<li class="option"><span>Option 10</span></li>
<li class="option"><span>Option 11</span></li>
<li class="option"><span>Option 12</span></li>
<li class="option"><span>Option 13</span></li>
<li class="option"><span>Option 14</span></li>
<li class="option"><span>Option 15</span></li>
<li class="option"><span>Option 16</span></li>
<li class="option"><span>Option 17</span></li>
<li class="option"><span>Option 18</span></li>
<li class="option"><span>Option 19</span></li>
<li class="option"><span>Option 20</span></li>
<li class="option"><span>Option 21</span></li>
<li class="option"><span>Option 22</span></li>
<li class="option"><span>Option 23</span></li>
<li class="option"><span>Option 24</span></li>
<li class="option"><span>Option 25</span></li>
<li class="option"><span>Option 26</span></li>
<li class="option"><span>Option 27</span></li>
<li class="option"><span>Option 28</span></li>
<li class="option"><span>Option 29</span></li>
<li class="option"><span>Option 30</span></li>
<li class="option"><span>Option 31</span></li>
<li class="option"><span>Option 32</span></li>
<li class="option"><span>A</span></li>
<li class="option"><span>B</span></li>
<li class="option"><span>C</span></li>
<li class="option"><span>D</span></li>
<li class="option"><span>E</span></li>
<li class="option"><span>H</span></li>
<li class="option"><span>E</span></li>
<li class="option"><span>E</span></li>
<li class="option"><span>A</span></li>
<li class="option"><span>Other</span></li>
</ul>
</div>
</form>
My idea is to show only the data that is coinciding in the search engine if I search for an existing specific word that shows me only that record and that the others do not show
I was looking for some other example code and only found this code on the web
<script>
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
Can you explain to me, please, what I'm doing wrong in the code.

I did a simple jsfiddle, works flawless with the second link I posted fiddle here
You have to remove the input out of the ul or it will be filtered, or you handle it differently
<input type="text" id="search"> <!-- not in ul > li -->

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!