Navbar fade out issue - html

Question

This is really a matter of me messing around in the CSS, and ending up unknowingly deleting or overriding something. When I hover over the nav link which drops down a list, it fades in. However, it doesn't fade out when it disappears after moving the mouse away.
Link to fiddle
<nav class="bg">
<ul class="width nav">
<li><span></span></li>
<li>Link</li>
<li><span></span></li>
<li>DropLink
<ul class="drop dr2">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li><span></span></li>
</ul>
</nav>
CSS (sorry for the mess on this one. In the full CSS file, it's all combined to save on space):
*{margin:0;padding:0;font-size:small;font-family:Roboto;vertical-align:middle;}
.drop,nav{border:1px solid #BBB;}
body>.main,nav>ul{font-size:0;}
.width{margin:0 auto;width:84%;}
.width,.bg{min-width:1000px;}
.bg,.drop{background:linear-gradient(#444,#000,#444);}
nav{border-left:none;border-right:none;}
nav>ul:after{content:"";}
nav a{padding:8px;}
nav a:hover, nav a:active{color:#BBB;}
.drop{z-index:2;left:-9999px;top:-9999px;opacity:0;border-top:none;}
.dr1{transform:translateX(-28.5%);width:230%;}
.dr2{transform:translateX(-27%);width:216%;}
.drop li{white-space:nowrap;display:block;}
.nav li:hover .drop{left:0;top:100%;opacity:1;transition:opacity .5s,top 0s,left 0s;}
nav span{border-left:1px solid #000;border-right:1px solid #555;padding:7px 0;}
nav{font-weight:bold;}
nav>ul{text-align:justify;}
nav>ul,nav>ul:after{width:100%;}
a{text-decoration:none;}
a{color:#FFF;}
.nav li:hover .drop{text-align:center;}
nav a,nav li,nav>ul:after{display:inline-block;}
nav li,nav>ul{position:relative;}
.drop{position:absolute;}
While I'm asking, I might as well kill two birds with one stone and ask something else. If you zoom in on the bar where the borders are, you'll see that they don't actually have the same height as the navbar itself. If I increase the padding in the relevant area in my CSS, it becomes one pixel too long. If I don't, it's one pixel too short. It is never 100% the height of the bar. I asked this question not too recently, but after changing the entire navbar code, I've been unable to replicate the solution.

Answer 1

Your problem is that you are only setting the left and top rules on hover, but when you aren't hovering the dropdown completely leaves the view, so although the opacity if fading, you can't see it.
What you need to do is change two group selectors to have the same position whether hovering or not.
E.G.
.nav li:hover .drop {
left:0;
top:100%;
opacity:1;
transition:opacity .5s, top 0s, left 0s;
}
Should become two selectors:
.nav li .drop {
left: 0;
top: 100%;
pointer-events: none;
opacity: 0;
transition: opacity .5s, top 0s, left 0s;
}
.nav li:hover .drop {
pointer-events: auto;
opacity: 1;
}
In addition, your text-align property should be set even when not hovering, otherwise the text will shift left.
E.G.
Delete:
.nav li:hover .drop {
text-align:center;
}
Add:
.nav li .drop {
text-align:center;
}
If you make these corrections, you should get: jsfiddle.net/4PLbd/28
Note:
I don't want to be nitpicky, but your code is styled terrible and makes fixing things difficult, always try to make code readable. I did not clean up a lot of code here, although it should be.

Answer 2

You should probably consider re coding this, half of your CSS was unecessary and also had to be cleaned up. I also took out code that was not needed, I can show you how to do it better, for instance the spaces with span elements, not necessary. Also, good code structure is important, as it will help you find and locate problems. I cleaned this up as best as I could. Again, this gets your first question done.
Here is just a few CSS changes that I made. Check the Jsfiddle
.drop {
opacity: 0;
transition: all .5s ease;
}
ul.nav li:hover .drop {
opacity: 1;
transition: all .5s ease;
}