This menu displays different colors for each menu item when rolled over in all browsers but IE6.  In IE6, all highlights (.hov .sel or .bc) are simply displayed in the last color specified.  What's going on?

.subMenu .mi0.hov, .subMenu .mi0.sel, .subMenu .mi0.bc {    color: #93A0C6;}
.subMenu .mi1.hov, .subMenu .mi1.sel, .subMenu .mi1.bc {    color: #1C5AA0;}
.subMenu .mi2.hov, .subMenu .mi2.sel, .subMenu .mi2.bc {    color: #FFC805;}
.subMenu .mi3.hov, .subMenu .mi3.sel, .subMenu .mi3.bc {    color: #B1B1B1;}
.subMenu .mi4.hov, .subMenu .mi4.sel, .subMenu .mi4.bc {    color: #DC761C;}

I've read that IE6 does not support chained class selectors.  So that .mi0.bc sets the style for all .bc not just .mi0.bc in IE6.

Is there an option for the DNN nav object to simply concatenate to .mi0bc to allow easy styling in CSS or is there another workaround.

You could set the styles individually.

Here's how I fixed it:

In the ascx file using http://code.google.com/p/ie7-js/ I put a conditional lt IE7 include of the IE7.js script.

Then in the CSS, I found this to work for all browsers:

.subMenu .root
{
    color: #666;
    font: 11px Arial;
    display: block;
    float: left;
    padding: 0px 11px 0px 11px;
    border-right: 1px solid #666;
    list-style: none;
}
.subMenu .bc.mi0 .txt            {    color: #93A0C6;}
.subMenu .mi0 .txt:hover       {    color: #93A0C6;}
.subMenu .bc.mi1 .txt            {    color: #1C5AA0;}
.subMenu .mi1 .txt:hover       {    color: #1C5AA0;}
.subMenu .bc.mi2 .txt            {    color: #FFC805;}
.subMenu .mi2 .txt:hover       {    color: #FFC805;}
.subMenu .bc.mi3 .txt            {    color: #B1B1B1;}
.subMenu .mi3 .txt:hover       {    color: #B1B1B1;}
.subMenu .bc.mi4 .txt            {    color: #DC761C;}
.subMenu .mi4 .txt:hover       {    color: #DC761C;}
.subMenu .last
{
    border: none;
}