Develop Reference

Site Nav Accessibility - Enter key doesn't open sub navigation

I'm building site navigation. If I tab into a category and hit enter nothing happens. If I press the spacebar I get a flash of the subnav but then it disappears.
I am using a button element to trigger the subnav instead of an anchor tag. If I switch to an anchor tag then it works.
What is causing this to happen in my Javascript and is there a way to make this better?
I've put the entire nav on codepen here: https://codepen.io/sibarad/pen/gORqevp?editors=1010
Here is a basic example of the html:
<ul class="site-menu header-container--nav-mobile">
<li class="site-menu__item site-menu__item--has-submenu">
<button tabindex="0" aria-expanded="false">Nav Link 1
<span class="site-menu__submenu-icon">
<svg aria-hidden="true" width="16" height="16">
<use xlink:href="#mobile-nav-arrow" />
</svg>
</span>
</button>
<!-- Main Nav Item 1 Sub-item -->
<ul class="site-menu__submenu" id="dt_nav-accountbilling">
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
</ul><!-- /Main Nav Item 1 Sub-item -->
</li><!-- /Main Nav Item 1 -->
Here is my JS:
// Submenu Hide/Show Mobile and Desktop
const items = document.querySelectorAll(".site-menu__item--has-submenu");
const subButton = document.querySelectorAll(".site-menu__item--has-submenu button");
// Activate Submenu
function toggleItem() {
if (this.classList.contains("submenu-active")) {
this.classList.remove("submenu-active");
} else if (site_menu.querySelector(".submenu-active")) {
site_menu.querySelector(".submenu-active").classList.remove("submenu-active");
this.classList.add("submenu-active");
this.setAttribute('aria-expanded', 'true');
} else {
this.classList.add("submenu-active");
this.setAttribute('aria-expanded', 'false');
}
}
// Event Listeners
for (let item of items) {
if (item.querySelector(".site-menu__submenu")) {
item.addEventListener("click", toggleItem, false);
item.addEventListener("keypress", toggleItem, false);
}
}
// Close Submenu From Anywhere
function closeSubmenu(e) {
let isClickInside = site_menu.contains(e.target);
if (!isClickInside && site_menu.querySelector(".submenu-active")) {
site_menu.querySelector(".submenu-active").classList.remove("submenu-active");
}
}
// Event listener for Close Submenu
document.addEventListener("click", closeSubmenu, false);
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
//if esc key was not pressed in combination with ctrl or alt or shift
const isNotCombinedKey = !(event.ctrlKey || event.altKey || event.shiftKey);
if (isNotCombinedKey) {
closeSubmenu(false);
}
}
});

The offending code is here:
for (let item of items) {
if (item.querySelector(".site-menu__submenu")) {
item.addEventListener("click", toggleItem, false);
<!-- this will be triggered as well, reversing your toggle -->
item.addEventListener("keypress", toggleItem, false);
}
}
You are adding 2 listeners that will both trigger on pressing space etc.
You do not need the second listener as you used a <button> which will treat Space etc. as a click event!
Removing the second listener will make the drop down work as expected.
for (let item of items) {
if (item.querySelector(".site-menu__submenu")) {
item.addEventListener("click", toggleItem, false);
}
}
Fixed code and fiddle
/////////////
// Site header/navigation
////////////
(function() {
'use strict';
// Hamburger Animation toggle
const hamburger = document.querySelector('.js-primary-nav__toggle');
const hamburger_text = document.querySelector('.js-primary-nav__toggle-text');
// Mobile Container for Nav Content
const site_menu = document.querySelector('.main-site-menu');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('toggle-active');
if (hamburger_text.textContent === "Menu") {
hamburger_text.textContent = "Close";
site_menu.classList.add('is-active');
hamburger.setAttribute('aria-expanded', 'true');
document.body.classList.toggle('lock-scroll');
} else {
hamburger_text.textContent = "Menu";
site_menu.classList.remove('is-active');
hamburger.setAttribute('aria-expanded', 'false');
document.body.classList.toggle('lock-scroll');
}
});
// Submenu Hide/Show Mobile and Desktop
const items = document.querySelectorAll(".site-menu__item--has-submenu");
const subButton = document.querySelectorAll(".site-menu__item--has-submenu button");
// Activate Submenu
function toggleItem() {
if (this.classList.contains("submenu-active")) {
this.classList.remove("submenu-active");
} else if (site_menu.querySelector(".submenu-active")) {
site_menu.querySelector(".submenu-active").classList.remove("submenu-active");
this.classList.add("submenu-active");
this.setAttribute('aria-expanded', 'true');
} else {
this.classList.add("submenu-active");
this.setAttribute('aria-expanded', 'false');
}
}
// Event Listeners
for (let item of items) {
if (item.querySelector(".site-menu__submenu")) {
item.addEventListener("click", toggleItem, false);
//item.addEventListener("keypress", toggleItem, false);
}
}
// Close Submenu From Anywhere
function closeSubmenu(e) {
let isClickInside = site_menu.contains(e.target);
if (!isClickInside && site_menu.querySelector(".submenu-active")) {
site_menu.querySelector(".submenu-active").classList.remove("submenu-active");
}
}
// Event listener for Close Submenu
document.addEventListener("click", closeSubmenu, false);
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
//if esc key was not pressed in combination with ctrl or alt or shift
const isNotCombinedKey = !(event.ctrlKey || event.altKey || event.shiftKey);
if (isNotCombinedKey) {
closeSubmenu(false);
}
}
});
}());
body {
font-size: 16px;
line-height: 1.5;
font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
}
.os-container--max-width, .header-container--nav-mobile, .header-container {
max-width: 1272px;
margin-right: auto;
margin-left: auto;
padding-left: 12px;
padding-right: 12px;
}
.os-container--fluid {
max-width: 100%;
margin-right: auto;
margin-left: auto;
}
.os-flex-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left: -8px;
margin-right: -8px;
}
#media (min-width: 672px) {
.os-flex-grid {
margin-left: -12px;
margin-right: -12px;
}
}
.os-flex--stack-mobile {
flex-direction: column;
}
#media (min-width: 672px) {
.os-flex--stack-mobile {
flex-direction: row;
}
}
.os-flex-grid__col {
padding-left: 8px;
padding-right: 8px;
-ms-flex: 1 1 0px;
flex-basis: auto;
flex-grow: 1;
min-width: 0;
max-width: 100%;
position: relative;
width: 100%;
}
#media (min-width: 672px) {
.os-flex-grid__col {
flex-basis: 0;
padding-left: 12px;
padding-right: 12px;
}
}
.os-flex-grid__col--12, .cms-flex-grid__col--12 {
flex-basis: 100%;
}
.os-flex-grid__col--9, .cms-flex-grid__col--9 {
flex-basis: 75%;
}
.os-flex-grid__col--6 {
flex-basis: 50%;
}
.os-flex-grid__col--4 {
flex-basis: 33.3333333333%;
}
.os-flex-grid__col--3 {
flex-basis: 25%;
}
.os-flex-grid__col--2 {
flex-basis: 16.6666666667%;
}
.site-header {
background-color: #fff;
list-style: none;
}
.site-header a {
color: #0e75c4;
}
#media (min-width: 1056px) {
.site-header {
margin-bottom: 42px;
}
}
.site-nav {
display: flex;
flex-direction: column;
align-items: normal;
justify-content: flex-start;
width: 100%;
position: relative;
z-index: 3;
}
#media (min-width: 1056px) {
.site-nav {
display: block;
}
}
#media (min-width: 1056px) {
.header-container {
position: relative;
z-index: 5;
}
}
.header-container--nav-mobile {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
#media (min-width: 1056px) {
.header-container--nav-mobile {
padding-left: inital;
padding-right: inital;
}
}
.header-main {
box-shadow: 0 4px 8px -2px rgba(18, 32, 42, 0.12);
padding-top: 16px;
padding-bottom: 16px;
}
#media (min-width: 1056px) {
.header-main {
box-shadow: none;
padding-top: 32px;
padding-bottom: 32px;
}
}
.header-main__items {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.header-logo img {
width: 100%;
max-width: 131px;
}
#media (min-width: 672px) {
.header-logo img {
max-width: 260px;
}
}
.header-component-wrap {
display: flex;
flex-direction: row;
align-items: flex-end;
}
.header-component-wrap a {
text-decoration: none;
}
.header-component-wrap a:hover {
text-decoration: underline;
}
.header-component-wrap svg {
fill: #213848;
margin-bottom: 8px;
width: 20px;
height: 20px;
}
#media (min-width: 1056px) {
.header-component-wrap svg {
margin-bottom: 0;
margin-right: 8px;
width: 20px;
height: 20px;
}
}
#media (min-width: 1056px) {
.header-component-wrap {
align-items: center;
}
}
.header-main__text {
text-decoration: none;
color: #0e75c4;
font-size: 10px;
font-weight: 600;
letter-spacing: 1.25px;
}
.header-main__text:hover {
text-decoration: underline;
color: #0e75c4;
}
#media (min-width: 1056px) {
.header-main__text {
font-size: 16px;
font-weight: 600;
letter-spacing: normal;
}
}
.site-menu,
.site-menu__submenu {
list-style-type: none;
}
.site-menu {
margin: 0 auto;
background-color: #213848;
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 24px;
padding-bottom: 24px;
overflow-y: auto;
}
#media (min-width: 1056px) {
.site-menu {
flex-wrap: nowrap;
flex-direction: row;
align-items: stretch;
justify-content: flex-start;
padding: 0;
padding-right: 8px;
padding-left: 8px;
position: relative;
top: 0;
height: auto;
overflow-y: visible;
border-radius: 6px;
}
}
.main-site-menu {
transition: 0.3s;
position: absolute;
top: 80px;
width: 100%;
left: 0;
left: 0;
opacity: 0;
overflow-x: hidden;
visibility: hidden;
height: 100vh;
background-color: #213848;
padding-bottom: 9.75rem;
}
#media (min-width: 1056px) {
.main-site-menu {
position: relative;
top: 0;
left: 0;
transition: none;
opacity: 1;
visibility: visible;
overflow-x: initial;
height: auto;
padding-bottom: 0;
background-color: transparent;
}
}
.main-site-menu.is-active {
opacity: 1;
visibility: visible;
}
.site-menu__item {
position: relative;
display: inline-block;
margin-bottom: 16px;
width: 100%;
}
#media (min-width: 1056px) {
.site-menu__item {
margin-bottom: 0;
width: auto;
}
}
.site-menu__item a {
display: block;
color: #fff !important;
}
.site-menu__item > a {
font-weight: 600;
font-size: 18px;
}
#media (min-width: 1056px) {
.site-menu__item > a {
padding: 24px 16px;
}
}
#media (min-width: 1272px) {
.site-menu__item > a {
padding: 24px;
}
}
.site-menu__item > a:hover {
cursor: pointer;
}
#media (min-width: 1056px) {
.site-menu__item > a:hover {
background-color: #0e75c4;
}
}
.site-menu__item--has-submenu {
border-bottom: 1px solid #2f4656;
}
#media (min-width: 1056px) {
.site-menu__item--has-submenu {
border-bottom: none;
}
}
#media (min-width: 1056px) {
.site-menu__item.site-menu__button {
margin-left: auto;
}
}
.site-menu__item--has-submenu button {
background-color: transparent;
outline: none;
border: none;
color: #fff;
padding-top: 24px;
padding-bottom: 24px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
font-size: 16px;
font-weight: 600;
transition: 0.333333333s ease-in-out;
}
.site-menu__item--has-submenu button:hover {
cursor: pointer;
}
#media (min-width: 1056px) {
.site-menu__item--has-submenu button:hover {
background-color: #2f4656;
color: #61bef0;
}
}
.site-menu__item--has-submenu button:focus {
outline: 1px solid #128ddd;
}
#media (min-width: 1056px) {
.site-menu__item--has-submenu button {
padding-top: 16px;
padding-bottom: 16px;
padding-left: 24px;
padding-right: 24px;
font-size: 14px;
}
}
#media (min-width: 1240px) {
.site-menu__item--has-submenu button {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 24px;
padding-right: 24px;
font-size: 16px;
}
}
.site-menu__submenu-icon svg {
width: 16px;
height: 9.33px;
}
#media (min-width: 1056px) {
.site-menu__submenu-icon {
display: none;
}
}
.mobile-nav-arrow {
width: 16px;
height: 9.33px;
transition: 0.3s;
fill: #128ddd;
}
.site-menu__submenu {
font-size: 16px;
background-color: #2f4656;
padding-top: 8px;
padding-right: 24px;
padding-bottom: 8px;
padding-left: 24px;
min-width: 100%;
border-radius: 6px;
transition: max-height 0.4s 0s ease-in-out;
display: none;
max-height: 0;
left: -999rem;
flex-direction: column;
}
#media (min-width: 1056px) {
.site-menu__submenu {
font-size: 14px;
position: absolute;
top: 100%;
left: 0;
margin-left: 0;
min-width: 302px;
display: flex;
flex-direction: column;
border-radius: 0;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
visibility: hidden;
padding-top: 16px;
padding-bottom: 8px;
}
}
#media (min-width: 1240px) {
.site-menu__submenu {
font-size: 16px;
}
}
#media (min-width: 1056px) {
.site-menu__item--has-submenu:nth-child(7) > .site-menu__submenu {
min-width: 185px;
}
}
#media (min-width: 1240px) {
.site-menu__item--has-submenu:nth-child(7) > .site-menu__submenu {
min-width: 295px;
}
}
#media (min-width: 1272px) {
.site-menu__item--has-submenu:nth-child(7) > .site-menu__submenu {
min-width: 302px;
}
}
.submenu-active .site-menu__submenu {
display: flex;
max-height: inherit;
left: auto;
}
#media (min-width: 1056px) {
.submenu-active .site-menu__submenu {
visibility: visible;
}
}
#media (min-width: 1056px) {
.submenu-active {
background-color: #2f4656;
}
}
.submenu-active > button {
color: #61bef0;
}
.site-menu__submenu-col {
position: relative;
width: 100%;
flex-basis: 0;
flex-grow: 1;
min-width: 0;
max-width: 100%;
list-style-position: inside;
}
#media (min-width: 1056px) {
.site-menu__subitem {
display: inline-block;
}
}
.site-menu__subitem a {
padding-top: 16px;
padding-bottom: 16px;
display: inline-block;
text-decoration: none;
}
.site-menu__subitem a:hover {
text-decoration: underline;
cursor: pointer;
}
#media (min-width: 1056px) {
.site-menu__subitem a {
padding: 0;
margin-bottom: 24px;
}
}
.site-menu__item--mobile-search {
display: block;
}
#media (min-width: 1056px) {
.site-menu__item--mobile-search {
display: none;
}
}
.site-menu__item--mobile-search input {
width: 100%;
padding: 12px;
background-image: url(../images/search-icon.svg);
background-repeat: no-repeat;
background-position: 98% center;
border: 1px solid #687782;
box-shadow: inset 0px 4px 0px #ebebeb;
border-radius: 6px;
}
.primary-nav__toggle {
outline: 0;
border: 0;
background: transparent;
background-color: transparent;
display: inline-block;
cursor: pointer;
padding: 0;
margin: 0;
height: 48px;
}
#media (min-width: 1056px) {
.primary-nav__toggle {
display: none;
}
}
.primary-nav__toggle-bar {
display: block;
width: 24px;
height: 2px;
background-color: #213848;
margin: 6px auto;
transition: 0.4s;
border-radius: 1px;
}
.primary-nav__toggle-bar--bottom {
margin-bottom: 4px;
}
.toggle-active .primary-nav__toggle-bar--top {
transform: rotate(-45deg) translate(-7px, 6px);
}
.toggle-active .primary-nav__toggle-bar--middle {
opacity: 0;
}
.toggle-active .primary-nav__toggle-bar--bottom {
transform: rotate(45deg) translate(-5px, -5px);
}
.lock-scroll {
overflow: hidden;
position: fixed;
width: 100%;
}
<header class="site-header site-header--home">
<nav class="site-nav" role="navigation" aria-label="main menu">
<!-- main header -->
<div class="header-main">
<div class="header-container header-main__items">
<a class="header-logo" href="">Logo</a>
<div class="header-component-wrap">
<!-- Mobile Hamburger Toggle -->
<button class="primary-nav__toggle js-primary-nav__toggle" aria-expanded="false">
<span class="primary-nav__toggle-bar primary-nav__toggle-bar--top"></span>
<span class="primary-nav__toggle-bar primary-nav__toggle-bar--middle"></span>
<span class="primary-nav__toggle-bar primary-nav__toggle-bar--bottom"></span>
<span class="header-main__text js-primary-nav__toggle-text">Menu</span>
</button><!-- /Mobile Hamburger Toggle -->
</div>
</div>
</div>
<!-- Site Navigation Wrappers -->
<div class="header-container">
<div class="main-site-menu">
<!-- Site Nav -->
<ul class="site-menu header-container--nav-mobile">
<!-- Main Nav Item 1 -->
<li class="site-menu__item site-menu__item--has-submenu">
<button tabindex="0" aria-expanded="false">Nav Link 1
<span class="site-menu__submenu-icon">
<svg aria-hidden="true" width="16" height="16">
<use xlink:href="#mobile-nav-arrow" />
</svg>
</span>
</button>
<!-- Main Nav Item 1 Sub-item -->
<ul class="site-menu__submenu" id="dt_nav-accountbilling">
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
</ul><!-- /Main Nav Item 1 Sub-item -->
</li><!-- /Main Nav Item 1 -->
<!-- Main Nav Item 2 -->
<li class="site-menu__item site-menu__item--has-submenu">
<button tabindex="0" aria-expanded="false">Nav Link 2
<span class="site-menu__submenu-icon">
<svg aria-hidden="true" width="16" height="16">
<use xlink:href="#mobile-nav-arrow" />
</svg>
</span>
</button>
<!-- Main Nav Item 2 Sub-item -->
<ul class="site-menu__submenu" id="dt_nav-savemoney">
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
</ul><!-- /Main Nav Item 2 Sub-item -->
</li><!-- /Main Nav Item 2 -->
<!-- Main Nav Item 3 -->
<li class="site-menu__item site-menu__item--has-submenu">
<button tabindex="0" aria-expanded="false">Nav Link 3
<span class="site-menu__submenu-icon">
<svg aria-hidden="true" width="16" height="16">
<use xlink:href="#mobile-nav-arrow" />
</svg>
</span>
</button>
<!-- Main Nav Item 3 Sub-item -->
<ul class="site-menu__submenu" id="dt_nav-outagesstorms">
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
</ul><!-- /Main Nav Item 3 Sub-item -->
</li><!-- /Main Nav Item 3 -->
<!-- Main Nav Item 4 -->
<li class="site-menu__item site-menu__item--has-submenu">
<button tabindex="0" aria-expanded="false">Nav Link 4
<span class="site-menu__submenu-icon">
<svg aria-hidden="true" width="16" height="16">
<use xlink:href="#mobile-nav-arrow" />
</svg>
</span>
</button>
<!-- Main Nav Item 4 Sub-item -->
<ul class="site-menu__submenu" id="dt_nav-safety">
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
<li class="site-menu__subitem">Subnav</li>
</ul><!-- /Main Nav Item 4 Sub-item -->
</li><!-- /Main Nav Item 4 -->
</ul><!-- /Site Nav -->
</div>
</div><!-- /Site Navigation Wrappers -->
</nav>
</header><!-- /Begin ES Site Header -->

mouseover and mouseout misbehaves when Vue JS transition component is used

I am creating a popup menu as shown below
const menuItem = {
props: ['name', 'val'],
data() {
return {
showChild: false
}
},
template: /*html */ `
<div class="nav-item" #mouseover="showChild=true" #mouseout="showChild=false">
<span v-if="typeof val === 'string' || val instanceof String">
<a :href="val" target="_blank" rel="noopener noreferrer">{{name}}</a>
</span>
<div v-else>
{{name}}
<ul class="popup" v-show="showChild">
<li v-for="(link, name) in val">
<a :href="link" target="_blank" rel="noopener noreferrer">{{name}}</a>
</li>
</ul>
</div>
</div>
`
}
const app = Vue.createApp({
components: {
menuItem
},
data() {
return {
menu: {
'Home': '#',
'Services': {
'Software Development': 'https://www.upwork.com/signup/create-account/client_contact_freelancer?ciphertext=~0142999d8b15001517&BYOC',
'Business Training & Frenchise': 'https://www.badabusiness.com/dd/BIMK003866',
'Organic Marketing Training & Affiliate Program': 'https://leads-arc.web.app/'
},
'Our Apps': {
'All': 'https://play.google.com/store/apps/collection/cluster?clp=igM4ChkKEzUwMDkwNjA5NzAwNjg3NTk4ODIQCBgDEhkKEzUwMDkwNjA5NzAwNjg3NTk4ODIQCBgDGAA%3D:S:ANO1ljIhW_g&gsr=CjuKAzgKGQoTNTAwOTA2MDk3MDA2ODc1OTg4MhAIGAMSGQoTNTAwOTA2MDk3MDA2ODc1OTg4MhAIGAMYAA%3D%3D:S:ANO1ljJmSZ8',
'Featured': 'https://play.google.com/store/apps/dev?id=5009060970068759882',
'Srila Prabhupada Vani': 'https://play.google.com/store/apps/details?id=com.mayank.srilaprabhupadavani',
'ChatEasy - Easy Messaging': 'https://play.google.com/store/apps/details?id=c.kapps.easymessage.free'
},
'Blogs': 'https://mayank-1513.medium.com/',
'Contact Us': 'https://mayank-chaudhari.web.app/',
},
}
}
})
app.mount('#app');
* {
max-width: 1600px;
margin: auto;
transition: 0.2s all cubic-bezier(0.65, 0.05, 0.36, 1);
color: #2c3e50;
cursor: unset;
box-sizing: border-box;
}
body,
html,
#app {
margin: 0;
padding: 0;
font-family: Avenir, Helvetica, Arial, sans-serif;
max-width: 100%;
}
nav {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
background: transparent;
align-items: center;
align-content: center;
justify-content: center;
}
nav.tr {
background: white;
box-shadow: #5555 0 0 0 2px;
height: 60px;
}
.nav {
display: flex;
align-items: center;
width: 100%;
padding: 15px;
height: 50px;
}
.nav-item {
display: inline-block;
position: relative;
padding: 10px 0;
margin: 20px;
font-weight: bold;
white-space: nowrap;
cursor: pointer;
}
.nav-item * {
text-decoration: none;
}
.nav-item:hover,
.popup li:hover,
.active {
border-bottom: 2px solid #756aee;
transform: translateY(-5%);
filter: drop-shadow(0px 0px 15px #fff);
}
.nav img {
height: 195%;
margin: 0;
cursor: pointer;
}
.nav img:hover {
filter: drop-shadow(-4px 8px 10px #756aee);
transition: all 0.1s;
}
.popup {
position: absolute;
list-style: none;
padding: 15px;
margin-top: 12px;
margin-left: -10px;
line-height: 38px;
border-radius: 5px;
box-shadow: 0px 0px 15px #0005;
background: #fff;
/* display: none; */
}
.nav-item:hover .popup {
display: inherit;
}
<script src="https://unpkg.com/vue#3.0.11/dist/vue.global.js"></script>
<div id="app">
<nav class="tr">
<div class="nav">
<span ref="spacer" class="spacer"></span>
<menu-item :name="key" :val="val" v-for="(val, key) in menu" :key="'menu' + key" />
</div>
</nav>
</div>
This works well. However, when I try to add transition component and enclose ul.popup in transition component, it does not behave properly and opacity becomes 0 even when mouse is on the popup menu. Below is the snippet showing this.
const menuItem = {
props: ['name', 'val'],
data() {
return {
showChild: false
}
},
template: /*html */ `
<div class="nav-item" #mouseover="showChild=true" #mouseout="showChild=false">
<span v-if="typeof val === 'string' || val instanceof String">
<a :href="val" target="_blank" rel="noopener noreferrer">{{name}}</a>
</span>
<div v-else>
{{name}}
<transition name="fade">
<ul class="popup" v-show="showChild">
<li v-for="(link, name) in val">
<a :href="link" target="_blank" rel="noopener noreferrer">{{name}}</a>
</li>
</ul>
</transition>
</div>
</div>
`
}
const app = Vue.createApp({
components: {
menuItem
},
data() {
return {
menu: {
'Home': '#',
'Services': {
'Software Development': 'https://www.upwork.com/signup/create-account/client_contact_freelancer?ciphertext=~0142999d8b15001517&BYOC',
'Business Training & Frenchise': 'https://www.badabusiness.com/dd/BIMK003866',
'Organic Marketing Training & Affiliate Program': 'https://leads-arc.web.app/'
},
'Our Apps': {
'All': 'https://play.google.com/store/apps/collection/cluster?clp=igM4ChkKEzUwMDkwNjA5NzAwNjg3NTk4ODIQCBgDEhkKEzUwMDkwNjA5NzAwNjg3NTk4ODIQCBgDGAA%3D:S:ANO1ljIhW_g&gsr=CjuKAzgKGQoTNTAwOTA2MDk3MDA2ODc1OTg4MhAIGAMSGQoTNTAwOTA2MDk3MDA2ODc1OTg4MhAIGAMYAA%3D%3D:S:ANO1ljJmSZ8',
'Featured': 'https://play.google.com/store/apps/dev?id=5009060970068759882',
'Srila Prabhupada Vani': 'https://play.google.com/store/apps/details?id=com.mayank.srilaprabhupadavani',
'ChatEasy - Easy Messaging': 'https://play.google.com/store/apps/details?id=c.kapps.easymessage.free'
},
'Blogs': 'https://mayank-1513.medium.com/',
'Contact Us': 'https://mayank-chaudhari.web.app/',
},
}
}
})
app.mount('#app');
* {
max-width: 1600px;
margin: auto;
transition: 0.2s all cubic-bezier(0.65, 0.05, 0.36, 1);
color: #2c3e50;
cursor: unset;
box-sizing: border-box;
}
body,
html,
#app {
margin: 0;
padding: 0;
font-family: Avenir, Helvetica, Arial, sans-serif;
max-width: 100%;
}
nav {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
background: transparent;
align-items: center;
align-content: center;
justify-content: center;
}
nav.tr {
background: white;
box-shadow: #5555 0 0 0 2px;
height: 60px;
}
.nav {
display: flex;
align-items: center;
width: 100%;
padding: 15px;
height: 50px;
}
.nav-item {
display: inline-block;
position: relative;
padding: 10px 0;
margin: 20px;
font-weight: bold;
white-space: nowrap;
cursor: pointer;
}
.nav-item * {
text-decoration: none;
}
.nav-item:hover,
.popup li:hover,
.active {
border-bottom: 2px solid #756aee;
transform: translateY(-5%);
filter: drop-shadow(0px 0px 15px #fff);
}
.nav img {
height: 195%;
margin: 0;
cursor: pointer;
}
.nav img:hover {
filter: drop-shadow(-4px 8px 10px #756aee);
transition: all 0.1s;
}
.popup {
position: absolute;
list-style: none;
padding: 15px;
margin-top: 12px;
margin-left: -10px;
line-height: 38px;
border-radius: 5px;
box-shadow: 0px 0px 15px #0005;
background: #fff;
/* display: none; */
}
.nav-item:hover .popup {
display: inherit;
}
.fade-enter-active,
.fade-leave-active {
transition: all .5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
<script src="https://unpkg.com/vue#3.0.11/dist/vue.global.js"></script>
<div id="app">
<nav class="tr">
<div class="nav">
<span ref="spacer" class="spacer"></span>
<menu-item :name="key" :val="val" v-for="(val, key) in menu" :key="'menu' + key" />
</div>
</nav>
</div>
How do I fix this issue?

Try to use
#mouseenter and #mouseleave combination

There was issue with the event that I was listening to. Adding a detailed answer here for benefit of others looking for solution to similar question.
See the WC3 documentation here
The mouseover event triggers when the mouse pointer enters the div element, and its child elements.
The mouseenter event is only triggered when the mouse pointer enters the div element.
changing #mouseover to #mouseenter and #mouseout to #mouseleave solves the issue.

How to close the open section of accordion menu?

I'm trying to create an accordion, but I don't know how to close the open one. As you can see, the accordion works fine until you try to close the current view.
How can I do that?
Note: The accordion can only be seen on mobile breakpoint.
$(function() {
$('.footer-links-holder').click(function() {
if ($('.footer-links-holder').hasClass('active')) {
$('.footer-links-holder').removeClass('active')
}
$(this).toggleClass('active')
});
});
/* HTML Set up */
footer {
background: #191919;
color: #fff;
margin: 0;
#import 'https://fonts.googleapis.com/css?family=Open+Sans';
font-family: "Open Sans", sans-serif;
padding-top: 20px;
}
footer .centered {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
footer .centered .footer-contact {
width: 20%;
}
footer .centered .footer-navigation {
width: 60%;
}
footer .centered .footer-navigation .footer-links-holder {
border-left: 1px solid rgba(255, 255, 255, 0.5);
width: 33.33333%;
position: relative;
float: left;
margin: 0;
padding-left: 10px;
}
footer .centered .footer-navigation .footer-links-holder>div {
position: relative;
top: -20px;
}
footer .centered .footer-navigation .footer-links-holder .footer-links {
margin: 0;
padding: 0;
list-style: none;
/*-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;*/
}
footer .img-bar {
position: relative;
text-align: center;
margin: 20px 0;
}
footer .img-bar div {
display: inline-block;
}
footer .img-bar div img {
height: 40px;
padding: 10px;
margin: 0 10px;
}
footer .bottom-bar {
position: relative;
text-align: center;
font-size: 10px;
background: #000;
padding: 15px 0;
}
/* Responsive Tablet Sizes */
#media only screen and (max-width: 749px) {
footer .centered {
flex-wrap: wrap;
}
footer .centered .footer-logo {
max-width: 250px;
width: 50%;
}
footer .centered .footer-contact {
width: 50%;
padding: 0 20px;
}
footer .centered .footer-navigation {
width: 100%;
}
footer .centered .footer-navigation .footer-links-holder {
padding: 0 20px;
}
}
/* Responsive Mobile Sizes */
#media only screen and (max-width: 500px) {
footer .centered .footer-logo {
width: 100%;
margin: 0 auto;
}
footer .centered .footer-contact {
width: 100%;
}
footer .centered .footer-navigation .footer-links-holder {
width: 100%;
padding: 0;
}
footer .centered .footer-navigation .footer-links-holder h3 {
margin: 0;
padding: 10px 20px;
border-top: #000 1px solid;
cursor: pointer;
/* Down Arrows */
}
footer .centered .footer-navigation .footer-links-holder h3::after {
float: right;
margin-right: 10px;
content: "";
display: inline-block;
vertical-align: middle;
margin-top: 7px;
width: 7px;
height: 7px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: transform 0.5s;
transition: transform 0.5s;
}
footer .centered .footer-navigation .footer-links-holder .footer-links {
max-height: 0;
overflow: hidden;
padding: 0 20px;
}
footer .centered .footer-navigation .footer-links-holder.active h3::after {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
footer .centered .footer-navigation .footer-links-holder.active .footer-links {
max-height: 10000px;
}
}
/* Social Icons */
.social h3 {
padding-bottom: 10px;
}
.social a {
display: inline-block;
padding: 7px;
width: 35px;
height: 35px;
margin: 0 2px;
background: #fff;
border-radius: 50%;
vertical-align: middle;
}
.social a:hover {
background: #65c2ed;
}
.social a.linkedin {
padding: 4px;
}
.social a svg .face,
.social a svg .twit,
.social a svg .link {
fill: #000;
}
/* Typography */
footer h3 {
font-weight: lighter;
margin-bottom: 0;
}
footer p,
footer li {
font-weight: 400;
letter-spacing: 0.05em;
margin: 10px 0;
}
footer a {
color: rgba(255, 255, 255, 0.5);
font-size: 10px;
text-decoration: none;
-webkit-transition: color 0.5s, background 0.5s;
transition: color 0.5s, background 0.5s;
}
footer a:hover {
color: #65c2ed;
}
/* Misc CSS */
.clearfix:before,
.clearfix:after {
content: " ";
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
clear: both;
}
body {
margin: 0;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/*# sourceMappingURL=styles.css.map */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<footer>
<div class="centered clearfix">
<div class="footer-navigation">
<div class="footer-links-holder">
<div>
<h3>Section 1</h3>
<ul class="footer-links">
<li>Page Title 1</li>
<li>Page Title 2</li>
<li>Page Title 3</li>
<li>Page Title 4</li>
</ul>
</div>
</div>
<div class="footer-links-holder">
<div>
<h3>Section 2</h3>
<ul class="footer-links">
<li>Page Title 1</li>
<li>Page Title 2</li>
<li>Page Title 3</li>
<li>Page Title 4</li>
</ul>
</div>
</div>
<div class="footer-links-holder">
<div>
<h3>Section 3</h3>
<ul class="footer-links">
<li>Page Title 1</li>
<li>Page Title 2</li>
<li>Page Title 3</li>
<li>Page Title 4</li>
</ul>
</div>
</div>
</div>
<div class="footer-contact">
<div class="social">
<h3>Contact</h3>
<a href="https://www.facebook.com/" class="facebook">
<svg viewBox="0 0 33 33"><g><path d="M 17.996,32L 12,32 L 12,16 l-4,0 l0-5.514 l 4-0.002l-0.006-3.248C 11.993,2.737, 13.213,0, 18.512,0l 4.412,0 l0,5.515 l-2.757,0 c-2.063,0-2.163,0.77-2.163,2.209l-0.008,2.76l 4.959,0 l-0.585,5.514L 18,16L 17.996,32z"></path></g></svg>
</a>
<a href="https://twitter.com/" class="twitter">
<svg viewBox="0 0 33 33"><g><path d="M 32,6.076c-1.177,0.522-2.443,0.875-3.771,1.034c 1.355-0.813, 2.396-2.099, 2.887-3.632 c-1.269,0.752-2.674,1.299-4.169,1.593c-1.198-1.276-2.904-2.073-4.792-2.073c-3.626,0-6.565,2.939-6.565,6.565 c0,0.515, 0.058,1.016, 0.17,1.496c-5.456-0.274-10.294-2.888-13.532-6.86c-0.565,0.97-0.889,2.097-0.889,3.301 c0,2.278, 1.159,4.287, 2.921,5.465c-1.076-0.034-2.088-0.329-2.974-0.821c-0.001,0.027-0.001,0.055-0.001,0.083 c0,3.181, 2.263,5.834, 5.266,6.438c-0.551,0.15-1.131,0.23-1.73,0.23c-0.423,0-0.834-0.041-1.235-0.118 c 0.836,2.608, 3.26,4.506, 6.133,4.559c-2.247,1.761-5.078,2.81-8.154,2.81c-0.53,0-1.052-0.031-1.566-0.092 c 2.905,1.863, 6.356,2.95, 10.064,2.95c 12.076,0, 18.679-10.004, 18.679-18.68c0-0.285-0.006-0.568-0.019-0.849 C 30.007,8.548, 31.12,7.392, 32,6.076z"></path></g></svg>
</a>
<a href="https://www.linkedin.com/" class="linkedin">
<svg viewBox="0 0 512 512"><g><path d="M186.4 142.4c0 19-15.3 34.5-34.2 34.5 -18.9 0-34.2-15.4-34.2-34.5 0-19 15.3-34.5 34.2-34.5C171.1 107.9 186.4 123.4 186.4 142.4zM181.4 201.3h-57.8V388.1h57.8V201.3zM273.8 201.3h-55.4V388.1h55.4c0 0 0-69.3 0-98 0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 31.5 41.9 0 26.9 0 98 0 98h57.5c0 0 0-68.2 0-118.3 0-50-28.3-74.2-68-74.2 -39.6 0-56.3 30.9-56.3 30.9v-25.2H273.8z"></path></g></svg>
</a>
</div>
</div>
</div>
<div class="bottom-bar">
All Rights Reserved © 2016 | Privacy Policy | Terms of Service
</div>
</footer>

Try to store the current active state of the clicked element before removing all active classes.
For example:
$(function() {
$('.footer-links-holder').click(function() {
const thisIsActive = $(this).hasClass('active');
$('.footer-links-holder.active').removeClass('active');
if (!thisIsActive) {
$(this).toggleClass('active');
}
});
});

Checkbox ace.js (online editor)

I am using ace.js and there are some themes. The basic theme is dark theme and I have checkbox that changes themes. But first 2 times, when I click the checkbox, themes are changing, but then, they don't change. The problem is only with themes.
Thanks for your help.
var eh = ace.edit("htmlEditor");
eh.setTheme("ace/theme/monokai");
eh.session.setMode("ace/mode/html");
document.getElementById('htmlEditor').style.fontSize='15px';
var ec = ace.edit("cssEditor");
ec.setTheme("ace/theme/monokai");
ec.session.setMode("ace/mode/css");
document.getElementById('cssEditor').style.fontSize='15px';
eh.getSession().on('change', function() {
update();
})
ec.getSession().on('change', function() {
update();
})
function update() {
var res = document.getElementById('result').contentWindow.document;
res.open();
res.write('<style>' + ec.getValue() + '</style>');
res.write(eh.getValue());
res.close();
}
update();
function showTheme() {
var eh = ace.edit("htmlEditor");
var cbox = document.getElementById('checkbox');
if (cbox.checked == false) {
eh.setTheme('ace/theme/tomorrow.css');
}
else {
eh.setTheme('ace/theme/monokai');
}
}
showTheme();
*{
padding: 0;
margin: 0;
}
#htmlEditor {
height: 100%;
min-height: 50vh;
width: 33%;
display: inline-block;
}
#cssEditor {
height: 100%;
min-height: 50vh;
width: 33%;
display: inline-block;
}
#container {
height: 100%;
width: auto;
white-space: nowrap;
overflow: hidden;
position: relative;
padding: 0 0 0 1%;
}
#result {
min-height: 424px;
position: relative;
}
body {
background-color: #afafaf;
}
#title-of-textarea {
display: flex;
}
#title-css {
margin: auto;
padding-right: 35%;
}
#header-code {
display: flex;
}
.mnu-code {
display: flex;
list-style-type: none;
padding: 0 0 0 2%;
}
.mnu-code li {
padding-left: 5%;
}
#menu-code {
width: 20%;
cursor: pointer;
}
#settings {
margin: 0 0 0 auto;
padding: 0 5% 0 0;
}
#header-code {
padding: 1% 0 1% 0;
}
#set {
cursor: pointer;
}
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script>
</head>
<body>
</div>
<div id="header-code">
<div id="menu-code">
<ul class="mnu-code">
<li>Проиграть</li>
<li>Сохранить</li>
<li>Поменять вид</li>
</ul>
</div>
<div id="settings">
<span id="set" onclick="openMenu()">Настройки
<p>
<label class="container">One
<input type="checkbox" id="checkbox" checked="" onclick="showTheme()">
<span class="checkmark"></span>
</label>
<p></p>
<p></p>
</span>
</div>
</div>
<div id="container">
<div id="title-of-textarea">
<div id="title-Html">
<h1>HTML</h1>
</div>
<div id="title-css">
<h1>CSS</h1>
</div>
</div>
<div id="htmlEditor"></div>
<div id="cssEditor"></div>
</div>
<iframe id="result" frameborder="0"></iframe>

How do I get navigation bar's dropdown to stay when hovering over the dropdown?

I have a simple website with a simple navigation bar, but it seems like a very daunting task after much research.
When hovering over any of the buttons, it will display a dropdown to show more options.
I have got that working fine, but how would I go about making the dropdown stay when I hover over the contents of the dropdown?
Basically when the cursor leaves the navigation's bar button and onto the dropdown menu, it doesn't disappear.
I read that it's possible with jQuery, but I want to do it in JavaScript alone if it's possible, even if it's lengthy.
The navbar's hover itself works, but whatever I tried to keep the dropdown there when hovering on it, keeps bugging everything out.
This is the code I have, and that I have tried:
document.getElementById("server").onmouseover = function() {
serverMouseOver()
};
document.getElementById("server").onmouseout = function() {
serverMouseOut()
};
function serverMouseOver() {
document.getElementById("serverdropdownbox").className += "animated fadeIn";
};
function serverMouseOut() {
document.getElementById("serverdropdownbox").className += "animated fadeOut";
};
document.getElementById("serverdropdownbox").onmouseover = function() {
serverDropdownMouseOver()
};
document.getElementById("serverdropdownbox").onmouseout = function() {
serverDropdownMouseOut()
};
function serverDropdownMouseOver() {
document.getElementById("serverdropdownbox").style.opacity = "1";
};
function serverDropdownMouseOut() {
document.getElementById("serverdropdownbox").style.opacity = "0";
};
#navbarbox
{
clear: both;
display: block;
width: 100vw;
height: 3.5vw;
padding: 0vw 0 0 0;
margin: 0;
}
#navbar, #navbar ul
{
width: 100vw;
height: 3.5vw;
display: flex;
padding: 0 0 0 0;
margin: 0;
}
#navbar span
{
height: 3.5vw;
display: block;
transform: skewX(15deg);
}
#navbar li
{
color: white;
list-style: none;
display: inline-block;
padding: 1vw 3.95vw 1vw 3.95vw;
margin: auto;
text-align: center;
color: red;
font-size: 2.3vw;
font-family: Jura;
height: 2.5vw;
transform: skewX(-15deg);
}
#serverdropdownbox
{
display: block;
opacity: 0;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#serverdropdowncontent
{
list-style-type: none;
width: 16vw;
margin: 1vw 0 0 10.1vw;
}
#serverdropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
background-color: white;
}
#server
{
background-color: blue;
}
#communitydropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#communitydropdowncontent
{
list-style-type: none;
width: 19.7vw;
margin: 1vw 0 0 26vw;
}
#communitydropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#community
{
background-color: brown;
}
#storedropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#storedropdowncontent
{
list-style-type: none;
width: 13.6vw;
margin: 1vw 0 0 45.65vw;
}
#storedropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#store
{
background-color: blue;
}
#downloadsdropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#downloadsdropdowncontent
{
list-style-type: none;
width: 19.8vw;
margin: 1vw 0 0 59.2vw;
}
#downloadsdropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#downloads
{
background-color: brown;
}
#contactdropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#contactdropdowncontent
{
list-style-type: none;
width: 16vw;
margin: 1vw 0 0 78.9vw;
}
#contactdropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#contact
{
background-color: blue;
}
.animated
{
animation-duration: 1s;
animation-fill-mode: both;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
animation-name: fadeOut;
}
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Jura" />
<body>
<!--Giga logo, top left-->
<img id="gigalogo" src="images/gigalogo.png">
<!--Steam logo, top right-->
<div id="steamlogomainbox">
<img id="steamlogo" src="images/steamlogo.png">
</div>
<!--navigation barrrrrr-->
<div id="navbarbox">
<ul id="navbar">
<li style="background-color: purple;"><span>Home</span></li>
<li id="server"><span>Servers</span></li>
<li id="community"><span>Community</span></li>
<li id="store"><span>Store</span></li>
<li id="downloads"><span>Downloads</span></li>
<li id="contact"><span>Contact</span></li>
</ul>
</div>
<div id="serverdropdownbox">
<ul id="serverdropdowncontent">
<li id="serverdropdownli">Server List</li>
<li id="serverdropdownli">GigaDB</li>
<li id="serverdropdownli">CS:GO</li>
</ul>
</div>
<div id="communitydropdownbox">
<ul id="communitydropdowncontent">
<li>Events</li>
<li></li>
</ul>
</div>
<div id="storedropdownbox">
<ul id="storedropdowncontent">
<li>Credits</li>
<li>Items</li>
<li>VIP</li>
</ul>
</div>
<div id="downloadsdropdownbox">
<ul id="downloadsdropdowncontent">
<li>TF2</li>
<li>CS:GO</li>
<li>Minecraft</li>
</ul>
</div>
<div id="contactdropdownbox">
<ul id="contactdropdowncontent">
<li>Contact Us</li>
<li>Staff</li>
<li>Steam Group</li>
<li>Appeal Ban</li>
<li>Links</li>
</ul>
</div>

First of all - your HTML structure is invalid. ul tag can have only li as direct child, not a. So ul > a > li must be replaced to ul > li > a.
Second - you don't need JS for such simple menu. Have ul > li > ul as sub-menu and use :hover on ul > li to show your sub-menu.
ul {
padding: 0;
}
li {
white-space: nowrap;
list-style: none;
}
#menu > li {
position: relative;
display: inline-block;
}
#menu > li > ul {
position: absolute;
left: 0;
top: 100%;
min-width: 100%;
opacity: 0;
transition: opacity 200ms ease-in-out;
}
#menu > li:hover > ul {
opacity: 1;
}
<ul id="menu">
<li>Home</li>
<li>
<span>Servers</span>
<ul>
<li>Server 1</li>
<li>Server 2</li>
<li>Server 3</li>
</ul>
</li>
</ul>