margin-top is behaving differently in IE compared to Google Chrome. Two menus are supposed to be displayed one above the other in my design.
The issue lies in the line margin-top:30%; within .anothermenu ul.
In Chrome, the second menu appears above the first one and at the top of the page (menu 111,222,333). However, this problem does not occur in Internet Explorer 11.
body {
margin: 0
}
.container ul {
border-top: 2px solid red;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
/* Set the navbar to fixed position */
top: 0;
/* Position the navbar at the top of the page */
width: 100%;
/* Full width */
height: 4%;
padding: 1px;
}
.container li {
float: right;
}
.container li a {
color: white;
padding: 16px;
text-decoration: none;
}
.container li i {
color: white;
}
.w3ls_header_middle {
padding: 0 0;
}
.agileits_logo {
float: right;
margin-right: 0em;
margin-top: 2em;
}
.agileits_banner {
float: left;
margin-left: 1em;
}
.anothermenu ul {
position: absolute;
margin-top: 30%;
list-style-type: none;
overflow: hidden;
background-color: #333;
height: 10%;
width: 100%;
}
.anothermenu li {
float: left;
width: 10%;
}
.anothermenu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.anothermenu li a:hover:not(.active) {
background-color: #111;
}<div class="container">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">About</a><i>|</i></li>
<li><a href="#contact">Contact</a><i>|</i></li>
<li><a href="#contact">Language</a><i>|</i></li>
<li><a href="#contact">Login</a><i>|</i></li>
</ul>
<div class="w3ls_header_middle">
<div class="container">
<div class="agileits_logo">
<img src="../../images/logo.png">
</div>
<div class="agileits_logo"></div>
</div>
<div class="agileits_banner">
<embed src="../../images/banner.swf" type="application/x-shockwave-flash" width="600" height="200" />
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="anothermenu">
<ul>
<li><a href="#home">111</a></li>
<li><a href="#news">222</a><i>|</i></li>
<li><a href="#contact">333</a><i>|</i></li>
<li><a href="#contact">444</a><i>|</i></li>
<li><a href="#contact">555</a><i>|</i></li>
</ul>
</div>