Css dropdown menu not working in ie6

I can’t get my css dropdown menu to work in IE6 (which I need it to work in as well as the latest browsers and mobile devices). IE 6 is my last glitch. Does anyone have any help?
http://www.ct-si.org/events/EnergyInnovation/AEIS2012dev/nav_new.html

Hi Welcome to Sitepoint :slight_smile:

The dropdown isn’t working in IE6 because of this rule that I have commented out.


ul#css3menu1 ul {
  [B]  /*display:none;*/[/B]
    position:absolute;
    left:0;
    top:100%;
    -moz-box-shadow:0.7px 0.7px 1px #777777;
    -webkit-box-shadow:0.7px 0.7px 1px #777777;
    box-shadow:0.7px 0.7px 1px #777777;
    padding:0 0px 0px;
    background-color:#737373;
    background-image:none;
    border-width:1px;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    border-style:solid;
    border-color:#545454 #d8d9da #d8d9da #d8d9da;
}


You don’t need that as the menu is placed off screen anyway and will work in IE6 if you remove it.

As to the actual styling of the menu in IE6 then that is a bigger problem because you have styled the whole menu using the child combinator (>) which IE6 doesn’t understand so therefore misses out on a lot of styling. If you want to support IE6 then you will need to use the descendant selector instead (a space) and then just reset it for deeper levels as required. Or alternativly add support for the child selector via one of the javascript libraries (only if you are using then already).

I’ve never seem so many child selectors in one page and in the thousands of pages I’ve coded I’ve never found a real need to use them at all - although they can reduce code if IE6 support is not required.

With regards to mobile devices then many don’t action hover effects because they are touch screens and don’t have hover although devices like the iphone will first action hover when first touched. Irrespective of that drop downs are not really usable or accessible on mobile devices and you should be offering an alternative menu to mobile devices if that is a pre-requisite.

If mobile is important then first create the page that works for mobiles and then enhance only for better browsers.

Thanks I will try this. I was customizing a menu generated by a menu generator… that put the child combinator (>) in. I’ve not used them before but was time crunched so used the generator vs starting from scratch. Not totally sure how to get rid off them but will look into your suggestions. Thanks again.

Just use a descendant selector instead.

eg.
change this:
li>a {background:red}

to this:
li a{background:red}

And then reset further down the nesting if styling wasn’t meant to cascade through.

li li a{background:whatever you need it to be…}

and so on…