CSS Margin not working properly in IE and Safari -


I am creating a CSS menu and for different reasons the sub menu's difference looks different in iOS and IE 11.

Billy is a few photos & amp; CSS code

how it looks and how it looks in Chrome. This is how it should appear in all browsers

In this way, IE & amp; The iOS Safari shows, the margins should be higher than the lower and should be lower on the left side. Internet Explorer

Here is the code

  header. Left li .mega-menu {background-color: # 31342a; Status: Completed; Limit-Radius: 0 px 0 px3px3px; Margin: -50px 0px 0px 0px; Visibility: hidden; Box-Shadow: 0 pixels 2px 3px RGBA (0, 0, 0, 0.4); -WebKit-box-shadow: 0 pixels 2px 3px RGBA (0, 0, 0, 0.4); -Moz-box-shadow: 0 pixels 2 pixels 3 pixels RGBA (0, 0, 0, 0.4); / ** Firefox * / -O-Box-Shadow: 0 pixels 2 px 3px rgba (0, 0, 0, 0.4); // Opacity / Opacity: 0; Transition: visibility 0.1 s linear 0.1 s, ambiguity 0.5 s linear, margin 0.5 s; Z-index: -1; } Header Left li: Hover & gt; .mega-menu {visibility: visible; Opacity: 1; Margin: 15px 0px 0px 0px; Transition delay: 0; }  

Can you try it.
I think that you display: block;

  header. Left li .mega-menu {background-color: # 31342a; Status: Completed; Limit-Radius: 0 px 0 px3px3px; Margin: -50px 0px 0px 0px; Visibility: hidden; Box-Shadow: 0 pixels 2px 3px RGBA (0, 0, 0, 0.4); -WebKit-box-shadow: 0 pixels 2px 3px RGBA (0, 0, 0, 0.4); -Moz-box-shadow: 0 pixels 2 pixels 3 pixels RGBA (0, 0, 0, 0.4); / ** Firefox * / -O-Box-Shadow: 0 pixels 2 px 3px rgba (0, 0, 0, 0.4); // Opacity / Opacity: 0; Transition: visibility 0.1 s linear 0.1 s, ambiguity 0.5 s linear, margin 0.5 s; Z-index: -1; Display area; } Header Left li: Hover & gt; .mega-menu {visibility: visible; Opacity: 1; Margin: 15px 0px 0px 0px; Transition delay: 0; }  

Comments

Popular posts from this blog

winforms - C# Form - Property Change -

java - Messages from .properties file do not display UTF-8 characters -

javascript - amcharts makechart not working -