Forums

Hover effects not applying in IE8

I’m testing some of my sites in IE8 Beta 2. On one site, I have a horizontal navigation menu with submenus that drop down vertically when you mouseover one of the main menu items. It’s built out of unordered lists.

Anyway, the menu itself works fine (surprisingly), but there’s one weird bug – when you mouseover a link in the submenu, the link color changes (as it’s supposed to), but the background-color of the link doesn’t. What’s weird is that I have the background-color and the link color defined in the same selector.

No matter what I do, I can’t get the background-color to take effect. I tried using !important and it didn’t make a difference. Even with Compatibility View enabled (which switches to IE7-style rendering), it still doesn’t work, which is odd since it does appear in real IE7 (and IE6, and Firefox, and Safari).

I’d definitely have to see a test page to see for sure. My theory is that the color is changing because of some other selector elsewhere in the document, and that this selector isn’t being used at all. I suspect it is because the li.root:hover is no longer really being "hovered" when the drop down link is being selected, so this selector never really gets used.

I suspect it is because the li.root:hover is no longer really being "hovered" when the drop down link is being selected, so this selector never really gets used.

That’s exactly what I thought too. It would make sense, because as it turns out, when you mouseover a link in the dropdown menu, the highlight on the root-level link disappears (whereas it stays in other browsers).

So I tried, for example:

Code:

#menu ul li.root ul li a:hover {background-color: #efefef;}

Code:

#menu ul li ul li a:hover {background-color: #efefef;}

Neither one made a difference. I think we’re on the right track though.

Unfortunately I can’t post a sample page as it’s an internal site. I’ll see if I can make a demo page from scratch and get the same behavior out of it.

Tips

Categories

We have a pretty good* newsletter.

Email Address

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans Pro and Source Code Pro. It is made possible through sponsorships from products and services we like.