I’ve been extremely busy lately, but I ran across this gem in my earlier posts. I think that it deserves it’s own spotlight, so I’ve decided post it here. As we all know, IE6 has broken support for the CSS :hover pseudo class on any element but the a tag, which is highly needed for drop down navigation. And since IE6 will need to be supported by web design and development for years to come, we still have to face this issue. Many solutions will use a separate JavaScript file to add back the missing functionality, usually a .htc behaviors file. However, I will do no such thing. I just want this to be in my CSS. Let’s setup a scenario.
Suppose you have a nav structure, styled like this
div#nav ul li
/*rules go here...*/
}
Typically, you would also incorporate some sort of hover style, like so:
div#nav ul li:hover
/* hover rules go here...*/
}
As we know, this won’t work in IE6, so we need a solution.
Here’s what I use
* html div#nav ul li{
unicode-bidi: expression(
this.onmouseover = function(){this.className += ' hover';},
this.onmouseout = function(){this.className = this.className.replace('hover','');}
);
}
Basically, this will add a class name of “hover” to the currently hovered list item. Then, when the hover is happening on a different element, it will remove the hover class from that element and put it on the new hovered element. Please note, this is not a new idea. This is simply the small line of code I use that I thought others may like. Also, take note of the * html preceding the div#nav rules. This is a hack to apply this rule to only IE6, no need to apply to others.
So, to conclude, now your CSS would look like this
div#nav ul li:hover,
div#nav ul li.hover
/* hover rules go here...*/
}
Basically, remember that anytime you would use an li:hover pseudo state to make a change, also append a li.hover rule to target the IE6 version of the hovered link!
Well, thats it. I’m busy and gotta keep it short. Peace out.
Ain’t it better to write #nav ul li a:hover. Supposing you have anchor inside the list – you have to, beacuse it is supposed to be navigation. No navigation with no links, he? :)
@zimmi: Of course, but in the case of a drop down nav, you would have a scenario like this:
<div id="my-nav"><ul>
<li>
<a href="#location" rel="nofollow">Go Here</a>
<ul>
<li>
<a href="#sub-location" rel="nofollow">Sub Nav Link</a>
<a href="#sub-location-2" rel="nofollow">Sub Nav Link 2</a>
</li>
</ul>
</li>
</ul>
</div>
So, as you can see if you use the
a:hoverto control the sub list display, you can’t, because the sub nav is in the list item, not within the link.Hey hey, very handy indeed!
Way cool.
adt
…
http://topsearch.ifrance.com/adt adt
…
buy wii
…
http://webstore.webng.com/buy-wii buy wii
…
This is a very nice way to do dropdown with CSS! I’m going to try this out asap. Very neat, thanks for sharing.
lv
…
http://webtop4u.ifrance.com/lv lv
…
ftd
…
http://topwebs4u.ifrance.com/ftd ftd
…
buy.com…
http://topwebs4u.ifrance.com/buy.com buy.com…
adt
…
http://onlineis.googlegroups.com/web/adt.html adt
…
limewire
…
http://www.freewebs.com/wellweb/limewire limewire
…
sierra trading post
…
http://www.freewebs.com/freetopweb/sierra-trading-post sierra trading post
…
atacand
…
http://livegroup.webng.com/atacand atacand
…
ged
…
http://www.geocities.jp/top16line/ged ged
…
ftd
…
http://www.geocities.jp/top15webs/ftd ftd
…
totally sweeet man!!
ged
…
http://www.geocities.jp/top8net/ged ged
…
debt solutions
…
http://www.geocities.jp/net3top/debt-solutions debt solutions
…
window curtains
…
http://usuarios.lycos.es/topstore/window-curtains window curtains
…
beds
…
http://membres.lycos.fr/topwebs/beds beds
…
lv
…
http://beauty.geocities.jp/topbags3/lv lv
…
trojan condoms
…
http://membres.lycos.fr/topwebs/trojan-condoms trojan condoms
…
lv
…
http://membres.lycos.fr/topbags/lv lv
…
ergonomic chairs
…
http://usuarios.lycos.es/topstore/ergonomic-chairs ergonomic chairs
…
allstate insurance
…
http://members.lycos.co.uk/instores/allstate-insurance allstate insurance
…
nordstrom
…
http://topsite.host93.com/nordstrom nordstrom
…
winmx
…
http://topsite.host93.com/winmx winmx
…
irs tax forms
…
http://goodsite.host93.com/irs-tax irs tax forms
…
bloomingdales
…
http://topsite.host93.com/bloomingdales bloomingdales
…
irs tax forms
…
http://helpwebsite.freepimphost.com/irs-tax irs tax forms
…
irs tax forms
…
http://park.geocities.jp/usa_most/irs-tax irs tax forms
…
usana
…
http://topsite.host93.com/usana usana
…
weight watchers
…
http://topsite.host93.com/weight-watchers weight watchers
…
net10
…
http://topsite.host93.com/net10 net10
…
pottery barn
…
http://topsite.host93.com/pottery-barn pottery barn
…
ftd
…
http://topsite.host93.com/ftd ftd
…
pottery barn kids
…
http://topsite.host93.com/pottery-barn-kids pottery barn kids
…
fog lights
…
http://topsite.host93.com/fog-lights fog lights
…
easyjet
…
http://topsite.host93.com/easyjet easyjet
…
eharmony
…
http://topsite.host93.com/eharmony eharmony
…
netflix
…
http://topsite.host93.com/netflix netflix
…