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).