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 :))
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?
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:
I don’t think we’re seeing the same page. I’m with Paul O’B - I’m not getting any disappearing drop-down menu in any browser; FF4, IE9, Chrome, IE8, IE7.
And what I’m seeing (again, in all browsers), is a divider between menu items that’s just a few pixels too long. Screenshot excerpt attached.
If I increase my font size in my browser, the “bug” goes away. But if I reduce it (in FF, View, Zoom, Zoom text only, then make it smaller) the “bug” rears its ugly head.
I think I need to do something that makes the drop down position a percent or something, so making the font smaller doesn’t create the gap.
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:
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.
It’s an attempt to prevent [porn/virus/spam from being attached without being checked first.
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:
ul#nav ul {
[B] top:36px;
padding-top:1px;[/B]/* makes it 37px away but still in contact with the parent.*/
}
ul#nav li a {
border-right: 2px solid #CCCCCC;
color: #B11A1B;
float: left;
font-size: 1.1em;
font-weight: bold;
[B]height: 36px;[/B]
[B] line-height: 36px;[/B]
margin: 0;
[B]padding: 0 10px;[/B]
text-decoration: none;
}
The top and bottom padding is removed and the line-height is set to the height of the nav to center the text (assuming the text is never to wrap of course).
You will have to address the nested items if you need different styling on the dropdown.
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?
You haven’t taken into account the default padding/margin on the nested ul.
Try this:
ul#nav ul {
[B] background:#fff;/* ie fix to maintain hover*/[/B]
display: none;
[B] left: -2px;[/B]
[B] padding: 1px 0 0;[/B]
[B] margin:0;[/B]
position: absolute;
top: 100%;
z-index: 1000;
}
ul#nav ul li {
clear: left;
[B] /*left: -44px;*/
left :0;
margin: 0;[/B]
}
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)
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.
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.
