Absolute position top in relative box different between browsers - html

Question

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:
http://jsfiddle.net/eAqev/ <-- JS Fiddle
HTML:
<div id="navigation">
<ul>
<li><h1>01. About</h1><h2>Learn about us</h2></li>
<li class="button"><h1>02. Products</h1><h2>View our selection of products</h2>
<ul class="scrollDown">
<li><p>Kitchen Worktops</p></li>
<li><p>Upstands/Splashbacks</p></li>
<li><p>Gables/ Panels</p></li>
<li><p>Glass</p></li>
<li><p>High Gloss</p></li>
<li><p>Bathroom Tops</p></li>
<li><p>Sinks/ Taps</p></li>
</ul>
</li>
<li><h1>03. Contact</h1><h2>Contact us!</h2></li>
<li><h1>04. Gallery</h1><h2>View photos of us</h2></li>
</ul>
</div>
CSS:
#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;
}

Answer 1

You made everything clear Just add the below codes.It will fix your problem
#navigation ul ul {
position: absolute;
z-index: 1500;
margin: 0 !important;
padding: 0 !important;
list-style:none;
background: #fff;
width: 200px;
top: 60px;
opacity:0.95;
filter:alpha(opacity=95);
-moz-opacity:0.95;
}
#navigation ul {
display: inline;
z-index:10;
position: relative;
}
Most probably IE7 will have a buggy environment. This will work fine with IE8+.

Answer 2

Demo
Hi now define your ID #navigation ul display:inline-block; than adjects your id #navigation ul ul in top
As like this
#navigation ul {
display: inline-block;
position: relative;
vertical-align: top;
}
#navigation ul ul {
top:48px;
}
Live demo

Answer 3

Different browsers have different default margin & padding on ul/li elements.
Have you tried resetting these all to 0?
#navigation ul, #navigation li {
padding: 0px;
margin: 0px;
}

Answer 4

Might be you should try css-reset? Just put it at beginning of your css
But it may mess layout so you will need to set some values by yourself.

Answer 5

Try this:
#navigation ul li {float: left;
width: 200px;
line-height:17px;
margin: 10px;
list-style: none;
border-bottom: 3px solid #ccc;
}