title: Absolute position top in relative box different between browsers
body: <p>I have a sub navigation which is placed in two different places on different browsers, and I'm unsure why. I do realise that using margin-top instead of top does fix this but the problem with that is that I have a jQuery slide animation when the sub navigation comes out and it doesn't look nice when I use margin-top since it comes out further up than it is. Here is a picture of the difference:</p>
  
  <p><a href="http://jsfiddle.net/eAqev/" rel="nofollow noreferrer">http://jsfiddle.net/eAqev/</a> &lt;-- JS Fiddle</p>
  
  <p><img src="https://i.stack.imgur.com/7eE0h.png" alt="The difference between Internet Explorer and Google Chrome"></p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div id="navigation"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;h1&gt;01. About&lt;/h1&gt;&lt;h2&gt;Learn about us&lt;/h2&gt;&lt;/li&gt;
              &lt;li class="button"&gt;&lt;h1&gt;02. Products&lt;/h1&gt;&lt;h2&gt;View our selection of products&lt;/h2&gt;
                  &lt;ul class="scrollDown"&gt;
                      &lt;li&gt;&lt;p&gt;Kitchen Worktops&lt;/p&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;p&gt;Upstands/Splashbacks&lt;/p&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;p&gt;Gables/ Panels&lt;/p&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;p&gt;Glass&lt;/p&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;p&gt;High Gloss&lt;/p&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;p&gt;Bathroom Tops&lt;/p&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;p&gt;Sinks/ Taps&lt;/p&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;h1&gt;03. Contact&lt;/h1&gt;&lt;h2&gt;Contact us!&lt;/h2&gt;&lt;/li&gt;
              &lt;li&gt;&lt;h1&gt;04. Gallery&lt;/h1&gt;&lt;h2&gt;View photos of us&lt;/h2&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#navigation ul {
      display: inline;
      position: relative;
  }
  
  #navigation ul li {
      float: left;
      width: 200px;
      height: 35px;
      margin: 10px;
      list-style: none;
      border-bottom: 3px solid #ccc;
  }
  
  #navigation ul li:hover {
      border-bottom: 6px solid #eee;
      cursor: pointer;
  }
  
  #navigation ul ul {
      position: absolute;
      z-index: 1500;
      margin: 0;
      padding: 0;
      list-style:none;
      background: #fff;
      width: 200px;
      top: 60px;
      opacity:0.95;
      filter:alpha(opacity=95);
      -moz-opacity:0.95;
  }
  </code></pre>