CODEWITHSUNDEEP
cssmargin
André Ferraz
André Ferraz

Reputation: 1521

CSS Margin not working properly in IE and Safari

Am building a CSS menu and for some reason the margin of the sub menu shows different in IOS and IE 11.

Bellow is some pictures & css code

Thats how it should look like and how it show in chrome. This is how it should look like in all the browsers

This is how IE & IOS safari shows, the margin should be higher from up and should be less to the left. Internet Explorer

Here is the code

header .left li .mega-menu {
    background-color: #31342a;
    position: absolute;
    border-radius: 0px 0px 3px 3px;
    margin:-50px 0px 0px 0px;
    visibility: hidden;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); /** Firefox */
    -o-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); /** For Opera */
    opacity: 0;
    transition: visibility 0.1s linear 0.1s,opacity 0.5s linear, margin 0.5s;
    z-index: -1;
}

header .left li:hover > .mega-menu {
    visibility: visible;
    opacity: 1;
    margin: 15px 0px 0px 0px;
    transition-delay:0s;
}

Upvotes: 1

Views: 2436

Answers (1)

Suresh Pattu
Suresh Pattu

Reputation: 6209

Can you try this.
I think you have missed display:block;

header .left li .mega-menu {
    background-color: #31342a;
    position: absolute;
    border-radius: 0px 0px 3px 3px;
    margin:-50px 0px 0px 0px;
    visibility: hidden;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); /** Firefox */
    -o-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); /** For Opera */
    opacity: 0;
    transition: visibility 0.1s linear 0.1s,opacity 0.5s linear, margin 0.5s;
    z-index: -1;
display:block;
}

header .left li:hover > .mega-menu {
    visibility: visible;
    opacity: 1;
    margin: 15px 0px 0px 0px;
    transition-delay:0s;
}

Upvotes: 1

Related Questions