sub menu nav disappearing on hover

Please see URL: http://backstageweb.net/woodensun/

Please mouse over any of the nav items with a sub menu (with the down arrows; 'what we sell,' 'what we do,' etc.) The mouseover behavior of these menus is flakey (and doesn't seem to matter which browser you're using). About half the time, the mouseover hover "holds" to drill down to the child menus, and about half the time it doesn't, i.e., the child menus disappear before you can land on any submenu items and you have to repeat. I can only guess this is being caused by something missing or conflicting in the .css (needs additional property somewhere?) but I have no idea what.

Any help appreciated - thanks!

John

I think you just haven't got the ul positioned high enough, so if you move the cursor slowly from the li to the ul there's a point where the cursor is not over either the li or the ul, the :hover state is lost and the ul disappears.

Have a try with:

ul.dropdown ul {
left: 0;
position: absolute;
top: 35px;
visibility: hidden;
width: 100%;
z-index: 1000;
}

Looking at your CSS, there is a slight gap between your span (which you seem to have the hover effect on), and the dropdown menu, so if the mouse pauses there too long, it hides it. You shouldn't have the span trigger the show: the span element should be the full height/width of the parent or it should be the parent who triggers the hover.

Thanks very much guys! SB, the slight change in the top: position seems to have done it, and Keleth, I'll look into your suggestion as well. This is not one of my sites, just one I was hired to do some maintenance on. The nav .css was a total mess, calling three different stylesheets, each containing many duplicate styles, but with different properties!

Thanks again for your help guys!