Shadow, nice method, but why not use ems over px?
BTW, I second “deadFish”!!
Because EM’s on cascading menus is a miserable ***** /FAIL/ thanks to one browser engine.
GECKO.
Firefox rounds of EM’s willy-nilly, so quite often you end up NOT being able to align the menu’s height-wise properly. Just like how it often screws up the meaning of “right” inside fluid and EM containers, it screws up the distance from “top” too – often making the parent container 1px taller and resulting in the “blur” occuring when you try to move the mouse into the dropdown.
Which is why for me, as a large font user, SO MANY website menus are just flat out broken/unusable… and why having those parent links point to pages that allow for a drilldown without the flyouts is so important. (and often forgotten).
In fact, around 80% of menus done in EM end up broken for me as a large font/120dpi user… so while content in %/EM is a “must have” for large font users, it’s just asking it to break on menus in most cases.
Also, usually I have a image background behind them, and %/Em is “instantly broken” when an image interaction is involved… Though CSS3 is looking to change that right quickly. Between the currently undeployable (IMHO) linear-gradient, and the ready for use now background-size, things are starting to look up.
Really though, it’s why while I’m a stickler for EM on CONTENT, for things like menus if you use 14px or larger, I can live with it… just so long as it’s not all completely illegible 12px or smaller, it’s all good. I’m even willing to forgive PX use on “less important” sidebar content when those sidebars have to be PX width… just so long as the important part of the page – the big content column, remains dynamic.
Though since I’m currently Mr. J, wouldn’t “clownfish” be better – NOT that I like using the word “fish” with menus since I think all the “fish” javascripts are absolute rot and don’t want to be associated with that trash in the slightest manner. NOT a fan of suckerfish – hell, I’m not even a fan of having the extra classses in the CSS as per my keyboard version, and might try adding them via script instead.
Even though my current keyboard assist script looks an awful lot like…
I am thinking I might adjust my dropdown code for the keyboard to pick up mouse for legacy IE versions too though. Should only add about 400 bytes of code to it.
Update – modified the “with script for keyboard” version to detect IE6- and apply the same functions to hover states… so the “with script” no longer needs csshover3.htc to function.
Nice work, Jason. 
I dunno if I’d go that far 
The script is more complex than suckerfish, when one of the reasons I don’t like suckerfish is the scripting…
Though it does make the CSS a bit easier since the only thing you need to nest for is color inheritance; as opposed to suckerfish where you have to target for positioning.
I am glad IE6 hover support it didn’t end up doubling the code size – originally I was just going to give them their own scripting then I realized they were doing the same thing as the keyboard nav, so just point onmouseover at onfocus and onmouseout at onblur… duh, simple.
Only thing I missed was, I had no freaking idea where I was on the menu as I tabbed (except on the ones with submenus since the text changed). Outline or a colour change or something would really help.
Especially on LinkedIn, I get really tired of having to look down at the lower-left URL just to guess which link I’m on. But I’ll blame browsers for this: in Lynx it doesn’t matter if there are focus styles.
I’m in love deathshadow60! That menu is so amazing!!!
I agree that those delays can make or break a navigation system, but keeping your common complaint in mind coupled with the ability to tweak these settings you can employ a shorter mouseout delay than the mouseenter. We’re talking fractions of a second for each so if unless you’re looking for it you won’t really notice it (that’s the goal at least).
My guess is most people just Ron Popeil the established plugins without playing with the settings and trying to get a smooth result.
Well, that is how it seems many people are building sites today – endless copypasta from various sources without the understanding to know if said code is any good, worth using, compatible with each-other, much less how to customize it for a decent user experience.
… and it’s not like the old days where it’s just tiny snippets off dynamic drive or templates from DW; we’ve got fullblown “frameworks” now that end up the same type of nonsense. Jquery, YUI, grid 960, blueprint, mootools – how nubes end up led down the garden path and how experienced developers who should know better shoot off their own reproductive systems.
Thanks for mentioning this. I tried it too and was impressed. Sounds like its a keeper…
It is very nice menu i will try it in my next website. Hope my client likes it.