Toolbar Megamenu doesn't work with IE [#1881208]

Since IE (9) doesn't support 'transition' (CSS3) , the submenus of the toolbar are not accessible, because they disappear immediately after you move the cursor away from the first level

items like 'store settings' or 'orders' etc.

That's kinda strange cause in the toolbar_megamenu.css there's a line saying

/* Fix drop-down cropping in IE 7 & 8 */

so why would they fix something for IE 7 & 8 which is not working on IE 9 ?
Or am I missing something?

Comments

Comment #1

scotthooker CreditAttribution: scotthooker commented 13 May 2013 at 15:37

Any solution to this one?

Comment #2

dudenhofer CreditAttribution: dudenhofer commented 17 May 2013 at 17:51

The problem is the layering of the dropdowns, this happens on line 105 of commerce_kickstart_menus.css they are given a z-index of -1. If you change this to 1, then the dropdown come down above the menu.

We will probably need to wrap a span around the text inside the links so we can extend the link down low enough to allow a smooth transition without affecting the look.

Both the transitions and the IE comment have nothing to do with this issue other than the fact that the transition allows modern browsers to move between the link and the dropdown before it disappears.

Comment #3

dudenhofer CreditAttribution: dudenhofer commented 17 June 2013 at 19:53

Status:

Active

» Needs review

I pushed an update to fix this here:
https://code.drupalcommerce.org/710

This update includes:
- Adding classes for each depth of the menu (previously using long parent/child css selectors)
- Adding IE-specific stylesheet
- Re-working the CSS in both toolbar_megamenu and commerce_kickstart_menus to apply the new classes cleaner styles and IE fixes.

I had to bring the drop-downs of the menu forward (only in IE) so it was in front of the blue toolbar and flush with the links to allow IE users to select the drop-down options.