绝对位置在浏览器之间的相对框中不同

Question

我有一个子导航,放在不同浏览器的两个不同的地方,我不知道为什么.我确实意识到使用margin-top而不是top确实可以解决这个问题,但问题是当子导航出来时我有一个jQuery幻灯片动画,当我使用margin-top时它看起来不太好看比它更进一步.这是差异的图片:

http://jsfiddle.net/eAqev/ < - JS小提琴

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

你把一切都搞清楚只需添加以下代码.它将解决你的问题

    #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;
        }

最有可能IE7将有一个错误的环境.这将适用于IE8 +.