My dropdown menu broke after a 2am margin tweak

Last week I was fixing a tiny spacing issue on a client's site and set margin-top to -1px on the hover state. Suddenly the whole menu flashed and vanished on Chrome, Firefox, and Safari. Has anyone else had a single pixel wreck an entire nav like that?

1 comments

1 Comment

troy_butler711d ago

Wait, did you check if that negative margin is pushing the dropdown container behind the parent element? I had basically the same thing happen once, and it turned out the -1px was making the hover area overlap just enough that the browser saw a gap between the link and the menu, so the mouse left the trigger before the dropdown could even show. The fix that saved me was adding a tiny padding or a transparent bridge element between the button and the menu, so the hover state never breaks. Even worse, some browsers treat sub-pixel rounding differently, so what looks like -1px in dev tools might actually be -1.5px after zoom or scaling, which makes the whole thing vanish on some screens but not others. Try setting the menu's z-index way higher than the nav and give it like 2px of padding on top instead of relying on that margin trick, that usually solves it without fighting the browser.