How can I close each dropdown straight away, without affecting my delay? - html

Question

I have a little problem here with my css dropdown navigation.
When I hover over the first item, the dropdown appears, which is good. And it also has a delay when I mouse away from it, also good. This is fine as I move all the way across the top level.
However.
If I were to navigate backwards, last one, to second last one etc, I notice that the dropdowns are appearing behind the one that preceded it.
I am assuming that this is because of the order that they appear on my HTML.
Does anyone have any solutions for this? CSS or even jQuery is welcome.
I have supplied my code and jsfiddle.
Thanks all for your time!
EDIT: I just realised that my delay isn't ideal. I can mouse away from the subnav, and it stays for a few seconds, but when I mouse back into it again, it isn't clickable. Probably due to the pointer-events:none
JSFiddle: http://jsfiddle.net/4wLtmx9m/
#menu {
position: relative;
}
#navbar {
position: absolute;
margin: 0;
padding: 0;
z-index: 999;
width: 100%;
}
#navbar li {
list-style: none;
float: left;
width: 16.6%;
background-color: #F6F6F6;
text-align: center;
color:#9a9999;
/*background:url(../Assets/icons/nav-sprite-icons.png)0 20px;*/
}
#navbar li a {
display: block;
padding: 3px 8px;
text-transform: uppercase;
text-decoration: none;
color: #999;
font-weight: bold;
}
#navbar li a:hover {
color: #000;
}
#navbar li ul {
opacity:0;
top:0px;
position:absolute;
background-color:black;
z-index: -100;
left: 0;
width: 100%;
pointer-events:none;
-webkit-transition: all 0.2s ease 3s;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease 1s;
}
#navbar li ul li {
background-color:black;
color:white;
}
#navbar li ul li a {
color:white!important;
}
#navbar li:hover ul {
opacity:1;
background-color:black;
position: absolute;
display: inline;
top:22px;
left: 0;
width: 100%;
margin: 0;
padding: 0;
z-index:-100;
-webkit-transition: all 0.2s ease 0s;
/*animation: fadein 0.2s;
-webkit-animation: fadein 0.2s;
-moz-animation: fadein 0.2s;*/
pointer-events:auto;
}
#navbar * {
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#navbar li:hover li, #navbar li.hover li {
float: left;
background-color:black;
}
#navbar li:hover li a, #navbar li.hover li a {
color: #FFF;
}
#navbar li li a:hover {
color: #357;
}
HTML
<div id="menu">
<ul id="navbar">
<li>Occasions
<ul>
<li>Valentine's Day
</li>
<li>Easter
</li>
<li>Mother's Day
</li>
<li>Father's Day
</li>
<li>Wedding
</li>
<li>Birthday
</li>
<li>Baby
</li>
</ul>
</li>
<li>Cards & Invitations
<ul>
<li>Invitations
</li>
<li>Baby
</li>
<li>Weddings
</li>
<li>Announcements
</li>
<li>Holiday
</li>
</ul>
</li>
<li>Canvas Prints
<ul>
<li>Full Wrap
</li>
<li>Colour Edge Wrap
</li>
<li>Frame
</li>
</ul>
</li>
<li>Mugs
<ul>
<li>11oz Single Image Mug
</li>
<li>11oz Double Image Mug
</li>
<li>11oz Scrapbook Mug
</li>
<li>11oz Fullwrap Mug
</li>
<li>14oz Travel Mug
</li>
<li>17oz Latte Mug
</li>
</ul>
</li>
<li>Device Cases
<ul>
<li>Smartphones
</li>
<li>Tablets
</li>
<li>iPods
</li>
</ul>
</li>
<li>Photo Gifts
<ul>
<li>Keychains
</li>
<li>Mousepads
</li>
<li>Playing Cards
</li>
<li>Puzzles
</li>
<li>T-Shirts
</li>
</ul>
</li>
</ul>
</div>

Answer 1

Rather than read and tweak your code, I wrote a working example with minimal CSS. Hope it helps.
#navbar {
white-space: nowrap;
}
#navbar li {
list-style: none;
position: relative;
display: inline-block;
margin: 0 1em 0 0;
padding: 0 0 1em;
}
#navbar li ul {
display: none;
padding: 0;
margin: .5em 0 0;
width: 10em;
position: absolute;
left: 0;
}
#navbar li li {
display: block;
margin: 0 0 .5em;
padding: 0;
}
#navbar>li:hover>ul {
display: block;
}
<ul id="navbar">
<li>
Occasions
<ul>
<li>
Valentine's Day
</li>
<li>
Easter
</li>
<li>
Mother's Day
</li>
<li>
Father's Day
</li>
<li>
Wedding
</li>
<li>
Birthday
</li>
<li>
Baby
</li>
</ul>
</li>
<li>
Cards & Invitations
<ul>
<li>
Invitations
</li>
<li>
Baby
</li>
<li>
Weddings
</li>
<li>
Announcements
</li>
<li>
Holiday
</li>
</ul>
</li>
<li>
Canvas Prints
<ul>
<li>
Full Wrap
</li>
<li>
Colour Edge Wrap
</li>
<li>
Frame
</li>
</ul>
</li>
<li>
Mugs
<ul>
<li>
11oz Single Image Mug
</li>
<li>
11oz Double Image Mug
</li>
<li>
11oz Scrapbook Mug
</li>
<li>
11oz Fullwrap Mug
</li>
<li>
14oz Travel Mug
</li>
<li>
17oz Latte Mug
</li>
</ul>
</li>
<li>
Device Cases
<ul>
<li>
Smartphones
</li>
<li>
Tablets
</li>
<li>
iPods
</li>
</ul>
</li>
<li>
Photo Gifts
<ul>
<li>
Keychains
</li>
<li>
Mousepads
</li>
<li>
Playing Cards
</li>
<li>
Puzzles
</li>
<li>
T-Shirts
</li>
</ul>
</li>
</ul>