Submenu disappears when mouse cursor moves off of navigation parent item - html

Question

When I place the cursor over the navigation item, the submenu appears, then when I move the mouse to click on something in the submenu, the submenu disappears.
I read a few similar issues on stackoverflow like changing z-index, didn't work for me
* {
font-family: arial, sans-serif;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
.nav {
position: fixed;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, .8);
border-radius: 0px;
border: none;
width: 100%;
margin: 0;
padding: 25px 0;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.item {
color: black;
font-weight: bold;
text-transform: uppercase;
}
.submenu {
display: none;
flex-wrap: wrap;
align-items: center;
align-text: center;
position: absolute;
top: 107px;
padding: 10px;
left: 0;
right: 0;
text-transform: uppercase;
z-index: 1;
background-color: #2F4F4F;
color: white;
justify-content: space-evenly;
}
.submenu li {
margin-left: 6%;
width: 19%;
padding: 5px;
}
.item.has-children:hover .submenu {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-evenly;
padding: 10;
flex-wrap: wrap;
flex: 1 1 calc(25% - 80px);
color: black;
background-color: rgba(255, 255, 255, .8);
}
ul {
list-style: none;
padding: 0;
}
<nav>
<ul class="nav">
<li class="item">
<a href="../index.html">
<img src="../Images/Navigation/Intak Logo 25px High.png" alt="Home" />
</a>
</li>
<li class="item has-children" style="color:#4D4D4D;">Printing
<ul class="submenu">
<li>Labels & Stickers</li>
<li>Banners</li>
<li>A-Frame</li>
<li>Menu Boards</li>
<li>Takeout Menus</li>
<li>Business Cards</li>
<li>Dine-In Menus</li>
<li>Posters</li>
<li>Envelopes</li>
<li>Chinese Wedding Cards</li>
<li>Flyers</li>
<li>Letterheads</li>
<li>Brochures</li>
<li>Vinyl</li>
<li>NCR Forms</li>
<li>Catalogues</li>
</ul>
</li>
<li class="item has-children">Graphic Design
<ul class="submenu">
<li>Logo Design</li>
<li>Ads/Flyers/Promotions</li>
<li style="text-align: center;">Menu Boards<br> (Digital & Boards)</li>
<li style="text-align: center;">Restaurant Menus<br> (Takeout & Dine-In)</li>
</ul>
</li>
<li class="item has-children">Chinese Calendars
<ul class="submenu">
<li>Cane Wallscroll Calendars</li>
<li>Wall Calendars</li>
<li>Mini Calendars</li>
<li>Desk Calendars</li>
<li>Special Desk Calendars</li>
<li>Red Packet Calendars</li>
<li>More Calendars</li>
<li></li>
</ul>
</li>
<li class="item">FAQS</li>
<li class="item">Contact Us</li>
</ul>
</nav>
When I place the cursor over the nav items, it should remain showing the submenu until I move the cursor of the nav flex item

Answer 1

The issue is that you have a top value on your .submenu class. This creates a gap where you are not technically "hovering" over the menu or submenu. The best way to fix this would be to use padding instead of top to push the submenu lower, while still having it technically cover the empty space.
Example:
* {
font-family: arial, sans-serif;
box-sizing: border-box;}
html, body {
margin: 0;
padding: 0;
}
.nav {
background-color: #ccc;
position:fixed;
top:0;
left:0;
/*background-color: rgba(255,255,255,.8);*/
border-radius: 0px;
border: none;
width: 100%;
margin: 0;
/*padding: 25px 0;*/
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.item {
color: black;
font-weight: bold;
text-transform: uppercase;
display: flex;
align-items: center;
height: 100%;
}
.submenu {
display: none;
flex-wrap: wrap;
align-items: center;
align-text: center;
position: absolute;
top: 100%;
padding: 10px;
left: 0;
right: 0;
text-transform: uppercase;
z-index: 1;
background-color: #2F4F4F;
color: white;
justify-content: space-evenly;
}
.submenu li {
margin-left: 6%;
width: 19%;
padding: 5px;
}
.item.has-children:hover .submenu {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-evenly;
padding: 10;
flex-wrap: wrap;
flex: 1 1 calc(25% - 80px);
color: black;
background-color: rgba(255,255,255,.8);
}
ul {
list-style: none;
padding: 0;
height: 100px;
}
<nav>
<ul class="nav">
<li class="item">
<a href="../index.html">
<img src="../Images/Navigation/Intak Logo 25px High.png" alt="Home" />
</a>
</li>
<li class="item has-children" style="color:#4D4D4D;">Printing
<ul class="submenu">
<li>Labels & Stickers</li>
<li>Banners</li>
<li>A-Frame</li>
<li>Menu Boards</li>
<li>Takeout Menus</li>
<li>Business Cards</li>
<li>Dine-In Menus</li>
<li>Posters</li>
<li>Envelopes</li>
<li>Chinese Wedding Cards</li>
<li>Flyers</li>
<li>Letterheads</li>
<li>Brochures</li>
<li>Vinyl</li>
<li>NCR Forms</li>
<li>Catalogues</li>
</ul>
</li>
<li class="item has-children">Graphic Design
<ul class="submenu">
<li>Logo Design</li>
<li>Ads/Flyers/Promotions</li>
<li style="text-align: center;">Menu Boards<br>
(Digital & Boards)</li>
<li style="text-align: center;">Restaurant Menus<br>
(Takeout & Dine-In)</li>
</ul>
</li>
<li class="item has-children">Chinese Calendars
<ul class="submenu">
<li>Cane Wallscroll Calendars</li>
<li>Wall Calendars</li>
<li>Mini Calendars</li>
<li>Desk Calendars</li>
<li>Special Desk Calendars</li>
<li>Red Packet Calendars</li>
<li>More Calendars</li>
<li></li>
</ul>
</li>
<li class="item">FAQS</li>
<li class="item">Contact Us</li>
</ul>
</nav>