Question

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

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

这是相关的HTML＆amp; 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或至少一个最小宽度添加宽度。

嵌套下拉菜单对齐

1 个答案: