Unable to click on drop-down menu items

[operapixie]

Hi there,
I'm nearly done with this site, and I've modified the heck out of the template the client chose. But suddenly I've got an issue with my menus that wasn't there earlier. I'm sure I screwed something up in the CSS, but I've been staring at it for so long now I know it's at the point where I need a fresh pair o eyes.

This is the development site: http://dev.yourbusybee.com/kaleco2/galleries/

The issue is this:
If you mouseover the menu item "Galleries" or "Color Bar", you get a nice drop-down. This is lovely. And you can mouseover and click on the first of these drop-downs. But if you try to mouse down any further, the menu disappears. AGHHHHHH

But the menu works mostly ok on the homepage (there seem to be some slight spacing issues, but otherwise the dropdowns are clickable. Grrrrrr

Is this a z-index thing? I don't know. I'm just frustrated.

Any help will be greatly appreciated.

Note: I don't pretend to be an expert at ALL. I fiddle around and figure stuff out.

~Laura

[Frankie]

That's a javascript-based menu. You might want to try in the javascript forum. If not, or if no response, try http://www.htmldog.com/articles/suckerfish/dropdowns/. Halfway the page you will find multi-level menus.

If the Suckerfish page goes to fast for you or if you like an alternative introduction to CSS-based menus, start with my tutorial, linked from my signature.

[operapixie]

Oh goodness. I had no idea this was likely to be a javascript issue. My apologies. I will go post over there right now! Thanks so much for taking the time to let me know that :-)

~Laura

[SB65]

No, this is a css issue - that is a suckerfish menu. There are two issues: #color_header is behind #main, and within #color_header .mainmenu is behind #pagetitle. Both of these mean that the drop down menu loses focus on :hover when the mouse moves down, and so the menu disappears.

Have a try making the following amendments to your css (style.php), in red:

#color_header {
    background-color: transparent;
    background-image: none;
    margin-top: -85px;
    max-height: 40px;
    position: relative;
    z-index:3
}

.mainmenu {
    background: none repeat scroll 0 0 transparent;
    height: 3em;
    position: relative;
    z-index: 2;
}

div#pagetitle.clearfix.row {
    background: none repeat scroll 0 0 transparent;
    position: relative;
    z-index: 1;
}

Incidentally, you have a style tag located between your head and body tags. I'd sort that as it may lead to unexpected behaviour.

[Frankie]

No, this is a css issue

Upon closer examination: you're right. Because the menu has a roll-out effect, I thought it was a JS-menu. But with JS off, it still works and shows the same problem. Only the roll-out effect is then no more.

Go with SB65's advice, Laura.

[operapixie]

Thank you so much, SB65! Huge improvement! It still sits underneath the breadcrumbs but I'm sure I can solve that.

I am curious, though, whether there's a way to make the mouseoever a bit easier. It seems like I have to maneuver my mouse directly over the arrow at the top of the drop down in order to get to those menu items. I would prefer to be able to just drag my mouse from wherever on the main menu item I happened to be (which would still be along the length of the drop-down), and get to the sub-menu. Does that make any sense?

~Laura

[SB65]

Breadcrumbs is just another z-index issue - set the z-index on the element to lower than that on the menu element, and make sure to set position:relative on the breadcrumbs as well.

I can't see your issue with navigating to the dropdowns using FF18. In what browser do you see this?

[operapixie]

I'm also using FF18.0. Hmmmm

[SB65]

Have a try making your css:

ul.sub-menu {
    margin-top: -27px;
}

I think the sub menu may just be positioned a bit low - with the result that the :hover state is lost when navigating from main to submenu.

[operapixie]

Dang! A difference of 2 pixels seems to have fixed that! THANK you. The only thing I still see as a slight issue is now the sub-SUB menu positioning. It's just slightly high. But I don't see a separate class from sub-menu in order to separately position that down a tad. Any ideas there?

Also, you'd noted that there was a style tag after the body that might cause problems. I think I know what that was in reference to, but I would appreciate if you could check to see if I've solved it. I had a code snippet for determining if a post was in a particular category and if it was not, to use some different styling. I found that I'd put that in just below the </head> tag. I've now moved it to above that area.

[SB65]

You don't currently have a style setting for the sub-sub-menu, no, but you can create one:

.sub-menu .sub.menu{
   ...styling...
}

You can check the rendered code by viewing the source of the page - Ctrl+U in everything except IE, and Page > View Source in IE. Yes, that style snippet is now in the head. The validator (see link in my sig) will also pick up these sorts of things for you.