margin-top working in internet explorer but not working in google chrome

Question

margin-top is working in IE but not working in Google Chrome. In my design two menus display each one above the other.

The problem is in this line margin-top:30%; in .anothermenu ul.

In the design if I work in Chrome then the second menu displays above the first menu and the second menu display in top of page (menu 111,222,333). However in internet explorer 11 not display this problem

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">الرئيسيه</a></li>
    <li><a href="#news">نبذه عن</a><i>|</i></li>
    <li><a href="#contact">اتصل بنا</a><i>|</i></li>
    <li><a href="#contact">اللغه</a><i>|</i></li>
    <li><a href="#contact"> تسجيل دخول</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>

   

Answer 1

Clear your cache in Chrome, I had the same problem one time. Chrome doesn't reload your file every time if it judge it doesn't change.

First, use CTRL+F5 instead of F5 when you refresh your page (CTRL+F5 force all files to reload). But sometimes it doesn't work.

So second, clear your cache (Settings -> Advanced Settings -> Clear Cache).

Follow this link and read the accepted answers, this guys explains how to "force" a reload of your css file.

Good luck !

Answer 2

You should try this.it can be Chrome caching problem, Did Ctrl+F5 thing work&. Do disable chrome caching in development tools! It should work OR On your browser toolbar Select History, and then Select Clear browsing data. Under "Clear browsing data,"

CLICK Clear browsing data.