Grow your CSS skills. Land your dream job.

CSS/JS Dropdown menu, IE6 compatible

  • # June 20, 2013 at 9:14 am

    Hey guys,

    I’m currently trying to implement a dropdown menu that will work in IE6. The :hover element doesn’t work properly (if at all) in IE6. So the solution I need for this will most likely come from javascript code. I’m using jquery myself. Here is a link to something I would like to have: [http://cognition.happycog.com/](http://cognition.happycog.com/ “Cognition Website”) (I’ve tested this website in IE6, and it works).

    I created a pen on CodePen with my code in it: [CodePen Link](http://codepen.io/csmhowitzer/details/hEJDg#pen-details-tab “CodePen Link”)

    jquery is a bit new to me, and the lifecycle of it. I’m trying to make it so when a menu topic is hovered over the dropdown is displayed and the user can select a link from there (simple right?), but it seems that you have to stay hovering over the parent menu item and then once you mouse off it the list disappears.

    Thanks, and hopefully this will be a useful post for others aswell.

    # June 20, 2013 at 9:41 am

    Frankly, if IE6 is a requirement then perhaps JQuery is not for you…they are basically not supporting it any more.

    All you really need is a way to apply a certain class on a click (although frankly a hover is usually good enough) and a custom JS script should work for that.

    # June 20, 2013 at 10:22 am

    Oh, yeah I didn’t know that about JQuery losing support. I had issues with the :hover psuedo class, and I read from an article that :hover can only be applied to links that contain an href attribute in IE6 (source: [CSS Hover IE6 Fix](http://css-plus.com/2010/03/ie6-hover-fix/ “CSS Hover IE6 Fix”)). So the author’s solution was essentially what I used. He used JQuery and went off of the hover state, and I can do that with javascript aswell but JQuery includes the .hover() function.

    # June 20, 2013 at 10:38 am

    I think the jQuery version 1.x branch keeps supporting IE 6, just stay away from 2.x

    # June 20, 2013 at 10:39 am

    yeah I’m working with 1.4 I think

    # June 20, 2013 at 10:46 am

    Not that I’m ever…ever…going to worry about IE6 but the hover issue…

    > The :hover element doesn’t work properly (if at all) in IE6.

    As I understand it the hover function doesn’t work if there is no href attribute in the anchor link?

    Does it have to be a valid href or would `href=””` not solve the problem?

    Seriously, I have no idea….does anyone have any experience of this?

    # June 20, 2013 at 1:21 pm

    > As I understand it the hover function doesn’t work if there is no href attribute in the anchor link?

    I’m sure the problem is that hover doesn’t work on an LI. It should work fine on an A.

    # June 20, 2013 at 1:52 pm

    You could be right but I was going from this at the link given…

    >All modern browsers support the hover pseudo-class properly and it functions properly on any html element, however in IE6 **it can only be applied to `` links that contain the href attribute**.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".