Question

Take a look at this fiddle which shows a sample menu that I’ve written.

This is how it looks untouched:

…when mouse is hovered on a menu:

…when mouse is hovered near the white space right below the “Search” menu (Look at the “Search” menu closely. The search icon should be white. It’s black because the mouse is, in a way, hovered on the menu item which is hidden):

That’s the form element residing in a div whose height is 0px at the moment (becomes height: auto; dynamically when the menu is clicked, revealing the menu item i.e. the form).

I have tried overflow: hidden; on the parent div to no avail. I can think of no other options. How can I fix this (with CSS)?

EDIT: Fixed image links in the fiddle. Issue persists only in Chrome. Everything’s fine in Firefox. No idea why.

Answer 1

I have no idea why that weird thing is happening, but I believe it shouldn’t. There’s a temporary fix, though:

.menu-item > a:hover > [class*="icon-"],
.menu-item > a:hover > [class*=" icon-"],
.menu-item > a.selected > [class*="icon-"],
.menu-item > a.selected > [class*=" icon-"] {
  background-image: url(http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings.png);
}

Here’s a fiddle with the fix.

NOTE: It would nevertheless be great if someone could explain why the issue presented in the question is at all happening.