I'm making a website for my wife's new business, and she wants a horizontal drop-down menu. After looking over many tutorials, I put one together. It works well in some of the browsers I've tested (FF, Opera) but breaks in IE and Google Chrome.

For some reason in Chrome/IE, the drop down expands, but vanishes when I try to mouse onto it. I suspect some sort of miniature gap between the main level items and the drop-down items. Has anyone else experienced this?

The menu doesn't disappear for me in IE7/8 or chrome and looks much the same as Firefox. Was there a specific page that this happened on or have you fixed it now?

It does look a bit odd in all browsers with the vertical dividing border being bigger than the menu and poking out at the bottom. Is that some sort of designers quirk or is it just badly coded? (i.e. Did you mean it to look like that or not :))

cydewaze
—
2011-04-25T12:54:05Z —
#3

Paul_O_B said:

The menu doesn't disappear for me in IE7/8 or chrome and looks much the same as Firefox. Was there a specific page that this happened on or have you fixed it now?

Actually that very page is doing it, and now when I test it on FF3.5 at work, it does the same thing. If you mouse over one of the menu items that has a drop-down, then move the mouse down to one of the submenu items, the drop-down vanishes as soon as you get to the border between the two.

I suspected a 1px gap or something, but even if I move the position of the drop-down up, it still vanishes. Could it be a z-index thing?

Paul_O_B said:

It does look a bit odd in all browsers with the vertical dividing border being bigger than the menu and poking out at the bottom. Is that some sort of designers quirk or is it just badly coded? (i.e. Did you mean it to look like that or not :))

Hrm, I don't get what you're saying (although with me and CSS, bad coding is a definite possibility!). It looks like this to me:

More proof that the page you're linking us to is NOT the page you're seeing. The text on the page you're giving us is not the same as the one in your screenshot, and it contains some character encoding problems:

Edit: I take that back - the text does appear to be the same. But you do have some encoding issues, nonetheless.

But there is only one page on the server, so it must be the one we're all looking at. :shifty:

cydewaze
—
2011-04-25T14:03:15Z —
#9

Ok, I think my problem is how I've set up that main menu bar. I need to figure out a better way to do the CSS. I've been playing with a copy locally, and I took the background gradient off it and played with the padding and margins, but the text still acts funky when I zoom it.

Maybe I'll look for CSS menu examples online. I sort of made this one up, which is probably a recipe for disaster, lol.

EarlyOut
—
2011-04-25T14:05:02Z —
#10

Probably best. After all, this a wheel that's already been invented. Many times.

PaulOB
—
2011-04-25T14:13:36Z —
#11

[ot]

EarlyOut said:

Ah, yes, this forum has to "approve" attachments. I wonder what that's actually in aid of?

It's an attempt to prevent [porn/virus/spam from being attached without being checked first.[/ot]

The problem looks like you have set your text size smaller in the browsers that you are using via the browsers controls which is why we didn't see the issue. The problem you mention arises in IE when small text is selected from the browser controls. It doesn't happen at normal text sizes.

It is likely that the cause is that you have a fixed height nav (36px) and you have made the text just happen to fit by using padding at the smaller text size you were viewing with.

Then you have positioned the ul at top:37px which means that even when working there is a 1px gap between the list and the nested nav and there must be no gaps at all or the focus on the element is lost.

You should either remove the height altogether let content dictate the height (top:100%) or do something like this:

EDIT: Ah, removing the height and line height and just using padding seems to fix it.

Remember to also remove the top:37px because that will have no bearing on the height now. Use top:100% plus the 1px padding-top I showed you to move the submenu outside the border on the ul but still remain in contact with the list item.

cydewaze
—
2011-04-25T15:31:25Z —
#16

Paul_O_B said:

Remember to also remove the top:37px because that will have no bearing on the height now. Use top:100% plus the 1px padding-top I showed you to move the submenu outside the border on the ul but still remain in contact with the list item.

Oh! I totally missed that padding-top, thanks. I still have a bit of the vanishing menu problem in IE7, but it's not nearly as bad as it was.

I've uploaded the changes, and I obviously have some debugging to do in IE. Namely to change the logo png to a gif to get rid of the color blending problem, not to mention that bizarre horizontal scrollbar.

I also seem to have some positioning problems in IE. What I have is basically a div for the header with position: relative, then I've set the nav menu to be position absolute within that, at a position of bottom: 0, left: 0. Is there a better way to do this?

PaulOB
—
2011-04-25T16:20:54Z —
#17

Hi,

You haven't taken into account the default padding/margin on the nested ul.Try this:

Rather than using display:none to hide elements and display:block to bring them back it is more accessible to use the off-left method. (e.g. to hide the element use margin-left:-999em and then to bring it back use margin-left:0)

cydewaze
—
2011-04-25T16:48:50Z —
#18

Paul_O_B said:

Rather than using display:none to hide elements and display:block to bring them back it is more accessible to use the off-left method. (e.g. to hide the element use margin-left:-999em and then to bring it back use margin-left:0)

Yeah, that works nice!

I also redid the CSS for the rest of the page to get rid of the absolute positioning for the header (changes are uploaded to the sample url). It seems to look more consistent, at least between IE and FF, but IE still has that stupid vanishing dropdown problem!

It's really strange because sometimes it's there and sometimes it isn't. But even putting a negative top margin on the dropdown ul doesn't seem to have any effect.

cydewaze
—
2011-04-25T18:25:42Z —
#19

Ok! It seems that applying a -1px top margin to the submenu ul li a on hover moves it up just a bit to overlap the main menu. It isn't perfect aesthetically, but it fixes the bug, and it's not so ugly that I can't live with it.

If anyone has a more elegant solution, I'm all ears!

PaulOB
—
2011-04-25T19:27:02Z —
#20

cydewaze said:

Ok! It seems that applying a -1px top margin to the submenu ul li a on hover moves it up just a bit to overlap the main menu. It isn't perfect aesthetically, but it fixes the bug, and it's not so ugly that I can't live with it.

If anyone has a more elegant solution, I'm all ears!

Try using the negative top margin on the nested ul instead and then adding a 2px padding top instead of the 1px. That will make the nested list overlap at all times but should still look the same with any luck.

However, as I mentioned a couple of times now my ie7 is working perfectly with the answers I have already given. I believe you are only getting these issues when you have resized the text via your browser controls.