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.
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.
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
Post a Comment