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.
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.
Last edited by operapixie; 01-18-2013 at 06:15 AM..
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:
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.
How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.
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?
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.
You don't currently have a style setting for the sub-sub-menu, no, but you can create one:
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.