嵌套下拉菜单对齐

Question

我花了几天时间已经找到了一种在固定宽度的水平条上均匀分布可变大小菜单项的方法，最后找到了一个详细的 jquery 解决方案here。我现在遇到的问题是，我的嵌套下拉菜单在不同浏览器中的显示方式完全不同，我只需要它们正确地从各自的 li 锚点下拉即可。

This is the site in question

到目前为止，它在 Firefox 上看起来还不错。在 Internet Explorer 中，dorp 下拉菜单被推到右侧，而在 Safari 中，它们被推到左侧。我已经尝试了很多事情，但我认为目前超出了我的能力范围。

这里是相关的 HTML 和 CSS，尽管您也可以在网站上查看源代码：

        <nav>
            <ul id="main-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Products</a>
                    <ul>
                        <li><a href="#">Wood Wool</a></li>
                        <li><a href="#">Wood Wool Bales</a></li>
                        <li><a href="#">Wood Wool Rope</a></li>
                        <li><a href="#">Coloured Wood Wool</a></li>
                    </ul>
                </li>
                <li><a href="#">Applications</a>
                    <ul>
                        <li><a href="#">Hamper Packaging</a></li>
                        <li><a href="#">Wine &amp; Champagne</a></li>
                        <li><a href="#">General Gifts</a></li>
                        <li><a href="#">Soaps &amp; Cosmetics</a></li>
                        <li><a href="#">Shellfish Packaging</a></li>
                        <li><a href="#">Stable Bedding</a></li>
                        <li><a href="#">Industrial</a></li>
                        <li><a href="#">Pesticide Alternative</a></li>
                    </ul>
                </li>
                <li><a href="#">What's Wood Wool?</a></li>
                <li><a href="#">The Eco Bit</a></li>
                <li><a href="#">Get in touch</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
        </nav>

/* NAVIGATION BAR */

header nav{
background-image: url(../_images/nav-bar-bg.png);
height: 48px;
width: 960px;
position: absolute;
top: 96px;
}

header nav #main-nav{
width:900px;
margin-left:30px;   
}

header nav ul li {
display:block;
float: left;
}

header nav ul li a {
display:inline-block;
height:48px;
line-height:48px;
text-decoration: none;
color: white;
font-weight:normal;
font-size:16px;
}

header nav ul li a:hover {
color: #09b497;
text-shadow:2px 2px 2px #000;
}


/* NESTED MENU OPTIONS */

header nav ul li ul {
position:absolute;
float: left;
visibility: hidden;
top:40px;
height:auto;
border:2px solid #0a7c6c;
background-color:#FFF;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
}

header nav ul li:hover ul  {
visibility: visible;
}

header nav ul li ul li {
display:block;
height:30px;
float:left;
clear:left;
}

header nav ul ul li a{
padding: 0 12px;
line-height:30px;
text-align:left;
font-size:14px;
color:#0a7c6c;
}

header nav ul ul li a:hover{
color: #09b497;
text-shadow:none;
}

Answer 1

将position:relative 添加到您的header nav ul li。您的 header nav ul li ul 已将其位置设置为绝对，因此相对于其父级而言它应该是绝对的。

忘记添加了，您还需要为header nav ul li ul 添加一个宽度或至少一个最小宽度。