Why is my subnav so jumpy? (links disappear before I can click them)

Question

http://kenbrook.org

You'll see the main nav has a subnav with elements floated left (I think*), but when you hover over a main nav item, then try to get to the sub-nav items, they disappear before you can click them! I can't quite figure out why this is.

*I designed the site, and another developer built it, but left to project early so I'm left to complete the build. He was sort of new to using CSS for layout, and not sure if this bug was bad CSS implementation, or an effect of the ModX plugin which is being used to produce this navigation system.

EXTRA INFO -The site is built on ModX -The nav is a plugin called Wayfinder (?) -The nav uses javascript, but maybe it would better just to create with CSS?

Answer 1

Say you're hovering over "Summer Camps" and you drift your mouse slowly down towards the sub menu, it seems like as soon as you exit the "Summer Camps" blue background, the sub menu disappears.

This tells me that the sub menu is not aligned exactly next to the main menu... there must be a small gap that when you hover over it, you lose your sub menu. Make sure your alignments are exact.

Answer 2

It's your menu link definition in dropline.css. You've got the link height set to 37px, however your #navbar is 39px tall. This creates the gap Hristo was talking about. You can fix it like so:

.menu ul {padding:0; margin:0; list-style-type: none;}
.menu ul li {float:left;}
.menu ul li a, .menu ul li a:visited {
     display:block;
     float:left;
     text-decoration:none;
     height:39px;
     line-height:39px;
}

This will slightly mis-align your menu's background image, but you should be able to tweak its size and/or position to fix.