Question

我希望它像这样的图像（在谷歌浏览器，Opera和Safari中像这样工作）：

然而，在Firefox和最新版本的IE中，它看起来像这样：

HTML：

<div id="navbar">
    <ul>
        <li class="selected">
            <a href="index.html">HOME</a>
        </li>
        <li>
            <a href="#">OUR FACILITIES</a>
        </li>
        <li>
            <a href="#">ABOUT US</a>
            <ul>
                <li>
                    <a href="#">MEET THE STAFF</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">CONTACT US</a>
            <ul>
                <li>
                    <a href="#">RESERVATIONS</a>
                </li>
                <li>
                    <a href="#">DIRECTIONS</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS：

#navbar {
    margin-top: 87px;
}
#navbar ul {
    list-style: none;
    background-color: transparent;
}
#navbar ul li {
    font-family: magic;
    font-size: 1.6em;
    background-color: #85CE85;
    display: inline-block;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 45px;
    padding-right: 45px;
}
#navbar .selected {
    background-color: #CCFFCC;
}
#navbar ul li ul {
    display: none;
    background-color: transparent;
    width: 245px;
    height: 130px;
    margin-top: 20px;
    margin-left: -85px;
    font-family: SkyHaven;
    font-size: .7em;
}
#navbar ul li:hover > ul {
    display: inline-block;
    position: fixed;
}
#navbar ul li ul li {
    width: 175px;
    border-top: 1px black dashed;
    background-color: #85CE85;
}
#navbar ul li ul li:hover {
    background-color: #6699FF;
}
#navbar ul li a {
    text-decoration: none;
    color: black;
    font-weight: bold;
}
#navbar a:hover {
    color: white;
    transition: .2s;
}
#navbar li:hover {
    background-color: #CC0000;
    transition: .8s;
}

感谢您的帮助！

Answer 1

改变了这个：

#navbar ul li:hover > ul {
display: block;
position: absolute;
}

似乎在Firefox中为我工作。它是如何找到你的？ Fiddle

Answer 2

以下是适用于您的新代码，没有任何问题：

http://codepen.io/anon/pen/KpxaG/

只是和建议尝试使用html5shiv，以避免IE问题：

html5shiv

Answer 3

这是你在找什么？

http://jsfiddle.net/j22cG/

你需要像这样定位子菜单：

position:absolute;
top:100%;
left:0;

将您的父母李定位为亲戚。

纯CSS下拉菜单不适用于Firefox和IE

3 个答案: