The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

CSS Dropdown and layout breaks in FF, IE

  • # July 11, 2013 at 6:17 pm


    I am working on a site design, and am having some serious issues to get the dropdown and layout to display consistently across browsers. Some of the nav items have to be displayed with popup submenus with variable positioning (based on the number of submenu items), so I created a separate UL for each menu item (I know, probably not the best idea, but I couldn’t figure out how to position the different submenus any other way).

    It works the way I want it to in Chrome (and in the codepen link below). In Firefox, there are some formatting issues with the nav (submenu positioning), and in IE, the dropdown rollovers do not work (submenus do not appear). In IE compatibility mode, the menu formatting is REALLY off, and also does not work.

    The HTML5 animation was done in Edge, and so I used the poster image option to replace it in older browsers (I also checked the Google Chrome Frame option, but it does not appear to do anything to allow the animation to play in older versions of IE).

    Any assistance would be greatly appreciated, specifically with the general layout (nav/layout centering problems in FF & IE compatibility mode).

    Codepen :

    # July 11, 2013 at 6:47 pm

    FYI : to view the code above as a direct link (to view in another browser), go to

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed