View Full Version : Drop Down Menu Hover Trouble

01-31-2012, 03:12 AM
I have created a website using a shopping cart software that will NOT (under any circumstances) let me change the doctype. My problem would be fixed with a proper doctype, but I can not to do this, so I was wondering if anyone had a more creative solution. I have a drop down menu on my site, and when you hover over the 'products' link, a drop down falls beneath it, and when your mouse leaves that box but stays in the drop down menu, I want the products link to stay in its hover state, which it does in everything but IE. So, do you have any solutions on how to with jquery or CSS make this happen? Thanks!

Link to my site.

Css for menu


Thanks in advance!!

01-31-2012, 06:34 AM
ul#topnav li.products:hover a,ul#topnav li.products a.products:hover,{
background: url(Hammer_Sprite) -144px -63px;
width: 238px !important;
IE doesn't support the :hover pseudo on any elements other than anchor.

Thus, you need to adjust your javascript in a such a way that it should add an extra class to the hovered <li>, say class="sfhover", and then add the background image and position to the <li> tag only.

See the small javascript snippet at http://www.htmldog.com/articles/suckerfish/dropdowns/

In your case, you may add this.className+=" sfhover"; and this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); into the hoverIntent script.

PS: I observe a lot of specific stylesheets using conditional comments. I'd recommend you to remove them all and then add some specific hacks in the main CSS file, if required!. In fact, if your markup is valid and well formed, all browsers will give a desired output, unless they are very old, like IE5/6.