Hover Intent with Pure CSS3

Recently I had a project with a fairly complex navigation system. The drop downs were done in pure CSS and worked very well, but seemed hyper. As the mouse passed over them, the drop down was triggered immediately, so passing through the nav bar — which spanned the width of the page — was a jarring experience.

We use absolute positioning for our CSS drop downs, with left: -999em to position them off the page, and li:hover .subnav { left: 0; } to bring them back into view. This is better than display: none; which hides the content of the drop downs from JAWS screen readers and is well-supported by >IE6 browsers.

I wanted to install a <a href="http://github.com/briancherne/jquery-hoverIntent" title="Visit HoverIntent JS on Github">HoverIntent</a> effect, but did not want to rely on javascript to do it. With some searching on <a href="http://stackoverflow.com/questions/8566090/delay-hover-in-css3" title="Visit StackOverflow">Stack Overflow</a>, I found an easy answer using CSS Transition Delay.

The CSS (simplified)

.submenu {
    transition: all 0s ease; 
}
li:hover .submenu {
    transition-delay: .25s; 
}

For a fuller example, <a href="http://codepen.io/jhogue/pen/payuj" target="_blank">here is a CodePen</a> with more complicated alternating position left and position right (keeps drop downs from extending outside of the area of the nav bar, or off the edge of the page).