Unfortunately, IE7 and older do not recognize :hover element on anything but an <a> tag, so your li:hover ul display property is not being applied.

You could use js to add a class on hover and show the sub-menu that way, but I just disregard IE7 for the most part :) Someone else around here who has to care about IE7 may have a better solution, though.

I know for a fact that IE7 supports :hover on LI tags I do it ALL the time. Every website I build applies the :hover attribute to the LI for the dropdowns to show up.

Though I should clarify, when I say IE7, I mean IE8 in Compatibility View...which as far as I know is just like IE7.

The site in question isn't working in Compatibility View (IE7) but I've looked at half a dozen other site I build applying the :hover attribute to the LI element and they work just fine...hence my confusion.

http://www.webtechwise.com/fix-ie7-submenu-hover-problem/

http://www.htmldog.com/articles/suckerfish/dropdowns/...

But I don't get why the :hover attribute works on EVERY other site I've built except this one...that's what I'm looking for an answer to.

Thanks.

The first page discussed the problem and at the bottom linked to a forum post that discusses several solutions including doctype strict and an htc behavior.

The second discusses the .sfhover via javascript method.

I've attached a screenshot of another of your sites in IE7 while mouse hovering. The hover pseudo class does not seem to be functioning as you have described.

I'm only posting this because I don't want someone else to see this thread and waste time trying to get :hover to work like that in IE7 with a transitional doctype. I really wish it did work. Unfortunately it does not.

Hmmm...I guess this is a little bigger than I thought.

Still seems weird that :hover works on some sites but not others when every site I build uses xhtml transitional as the doctype.

To quote @aghouseh "Unfortunately, IE7 and older do not recognize :hover element on anything but an <a> tag"

It is possible the in these cases your <li> tags are inside of your <a> tags and you are applying it to the a:hover pseudo class.

If you really have something working with li:hover on a dropdown, you should really write a blog about it and demonstrate the technique. It would be very popular.

Here is a site working with li:hover

http://www.birthline.org

I run IE8 in "IE7" mode and the dropdowns work just fine.

The <li> tag is not inside the <a> tag and the :hover attribute is applied to the LI tag.

Here's another one that works:

http://www.bdexteriors.com/

And another one

http://www.sealking.com/

Also, I might verify that your DOCTYPE is the same as the other sites that are working.

Anyone else have any insight into this?

I just built out another website today and the drop-downs DO work in IE7...just not in the site I mentioned in my original post...this is driving me nuts!