CSS Dropdown pause?

Can anybody think of a non-JS method to pause CSS dropdown menu lists?

[bedlam]

I'm a dork ;-)

I've built a nice single-level dropdown menu using the CSS from you-know-who's 'Suckerfish' menus. I've altered it so that the top-level menu is vertical, and the second-level menu drops down from an absolutely positioned point regardless of which item is moused-over on the top level. It works in the current major browsers and looks beautiful. There is, however a problem...

Obviously (at least I assume it would have been obvious if I weren't a dork), this isn't very usable, since the popup is only visible when the link in the first menu is moused over. When you move the mouse away from the link on the top level to get to the second level, the popup disappears. In other words, I have created the CSS equivalent of the worst kind of dhtml menu - beautiful, but utterly unusable.

Short of employing javascript, I can't think of a way to get the popup to persist, but I'm still wondering if there is something clever I've overlooked. I have about decided to re-tool the menu so that it operates to the side instead of vertically, but I thought it would be worth trying to tap the expertise around here for a solution. Any ideas anyone?

Thanks for any suggestions,

-B

PS - I know this touches on the behavior/presentation debate but, even though this navigation system as a whole will be usable without javascript, I'd like to avoid introducing any more JS than was already necessary to get IE to :hover.

[createErrorMsg]

bedlam, I know exactly what you're referring to. The only solution that comes to mind (completely untested, mind you) is to make the drop down part large enough that mousing off of any given top-level LI puts you onto the lower-level drop down.

Hard to articulate without knowing the exact appearance of your menu, but say it was a vertical menu down the left sidebar and you wanted the drop-down to occur at the top and to the right of the menu, no matter which item is selected. You could conceivably give the LI UL revealed by the hover effect a height equal to the total height of the top-level menu, with a transparent background (perhaps a positioned image for background). Mousing off of any given menu item takes you into the drop menu space, even though it wouldn't appear that way.

The problem, of course, is that this enlarged drop-space would overlap all other elements adjacent to the menu, and until it was moused past, the stuff underneath would be 'inaccessible', but maybe the trade-off would be worth it.

Anyway, that's my two cents. I'll be keeping track of this thread to see any other answers that arise. I think this one is worth figuring out!

[bedlam]

Heh ;-)

Well, I thought it was worthwhile too at first - and I had gotten as far as trying to resize the <ul> so I wouldn't lose the :hover state.

But then I realized that, even if I got the popup to persist for that crucial half-second or so, I would still lose it when I moused over the other links in the original vertical menu on the way... (in this menu the popup was directly below the top-level menu and the links were styled "display:block'" - there was no way not to mouse over any of them on the way to the popup...)

I have since adopted a more conventional menu appearance. Having said that though, if anyone has any more good ideas in addition to 'supersizing' the relevant elements, I still think it might be a useful thing to have tucked away in one's files...

-B

createErrorMsg, sticky me if you want to see the menu where the design part of the brain was insufficiently supervised by the usability part of the brain...