Submenu leaving pixels in desktop view

Question

I came up with a template design that I like. Everything works well with no errors, except for one detail. The drop down menu in desktop mode leaves a residue of text for a second or so, before fading off. 
 
Here is the code that affects that area:
 
.nav-menu li:hover>.sub-menu{
top: 4rem;
opacity: 1;
visibility: visible;
}
 
.sub-menu li:hover>.sub-menu{
top: 0rem;
left: 8rem;
}
 
At first I tried using a no hover class after the hover class:
 
.nav-menu li:not(:hover)> .sub-menu{
display:none;
}
That fixed the problem in mobile view but not desktop view. It eliminated the residue but rendered the sub menu unusable, because it disappeared too fast. I also tried experimenting with transition properties. That made it worse. Is there any easy fix?  Here is the page:  
https://atnuke.com/idx-1.html
[Link edited by moderator for clarity.]
 
Thanks again.

BenPleysier · Answer

Add `opacity: 0;` to the sub-menu as in

.sub-menu {
	line-height: 2rem;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	padding-left: 5px;
	padding-right: 5px;
	display: block;
	position: absolute;
	border-top: 3px solid #145DDD;
	background-color: #191919;
	-webkit-transition: all 650ms ease;
	transition: all 650ms ease;
	top: 4rem;
	visibility: hidden;
	z-index: 1000;
    opacity: 0;
}

Off Topic: Your CSS is a complete mess! First, you need to start with the smallest screen size first. Make sure everything looks the way that you want it to. Then fiddle with media queries and override only those style rules that affect the next size up. .nav-menu li:hover>.sub-menu{ top: 4rem; opacity: 1; visibility: visible; } .sub-menu li:hover>.sub-menu{ top: 0rem; left: 8rem; }

Either, properly structure the style sheet or have specific style sheets per component. The latter is ceratinly true if serving HTTP/2 or higher.

A time saving solution is to use Bootstrap. I know, I know, you want to do it yourself and that is to be respected. But I think that your time could be spent more productively than sitting behind that screen. Someone close to you is bound to agree.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded