CSS 菜单在 IE 和 Firefox 中没有出现在正确的位置答案

【问题标题】：CSS Menu does not appear in correct place in IE and FirefoxCSS 菜单在 IE 和 Firefox 中没有出现在正确的位置
【发布时间】：2013-11-07 19:18:48
【问题描述】：

以下是我遇到的问题的屏幕截图。下拉菜单应该出现在顶部菜单的第二个菜单项下。

HTML 是，

<nav class="nav">
    <ul>
        <li class="menu-item">Hi Alexander!</li>
        <li class="menu-item"><a>My Account</a>
            <div class="my-sub-menu">
                <ul class="sub-list">
                    <li class="list-item"><a>History</a></li>
                    <li class="list-item"><a>Personal Details</a></li>
                    <li class="list-item"><a>Preferences</a></li>
                    <li class="list-item"><a>Bonuses</a></li>
                    <li class="list-item"><a>Wishlist</a></li>
                    <li class="list-item"><a>Newsletter</a></li>
                    <li class="list-item"><a>Invite Friends</a></li>
                    <li class="list-item"><a>FAQ</a></li>
                    <li class="list-item"><a>Sign out</a></li>
                </ul>
            </div>
        </li>
        <li class="menu-item"><a>Contact Us</a></li>
        <li class="menu-item"><a>Chat</a></li>
        <li class="menu-item"><a>Chat</a></li>
    </ul>
</nav>

CSS如下，

.nav {
        margin-top: 2px;
        position: relative;
        float: right;
    }

    .nav > ul {
        padding: 0;
        margin: 0;
    } 

    .menu-item{
        list-style: none;
        float: left;
    }

    .menu-item .my-sub-menu {
        visibility: hidden;
        position: absolute;
        padding: 0;
        margin: 0;
    }

    .menu-item:hover .my-sub-menu {
        visibility: visible;
    }

    .list-item {
        list-style: none;
    }

我需要子菜单出现在顶部菜单的第二项下。这仅在 Firefox 和 IE 中，但 chrome 完美呈现。我无法弄清楚问题是什么。至少有我可以用于这两个浏览器的修复程序吗？或解决此问题的其他替代方法。

提前告诉你。

【问题讨论】：

看看jsfiddle.net/fH7uH

标签： html css internet-explorer firefox

【解决方案1】：

如果您将 position:relative 添加到 .menu-item ，它将使绝对定位从列表项本身开始工作。唯一的缺点是，如果您在下拉列表中使用基于百分比的宽度，它将父 li 的宽度设为 100%，因此可能必须指定像素宽度。

【讨论】：

【解决方案2】：

尝试做

.sub-list{
padding:0px !important;
}

如果您希望通过第二个菜单将其归入 联系我们 然后改变div的位置

<div class="my-sub-menu">
            <ul class="sub-list">
                <li class="list-item"><a>History</a></li>
                <li class="list-item"><a>Personal Details</a></li>
                <li class="list-item"><a>Preferences</a></li>
                <li class="list-item"><a>Bonuses</a></li>
                <li class="list-item"><a>Wishlist</a></li>
                <li class="list-item"><a>Newsletter</a></li>
                <li class="list-item"><a>Invite Friends</a></li>
                <li class="list-item"><a>FAQ</a></li>
                <li class="list-item"><a>Sign out</a></li>
            </ul>
        </div>

进入下一个li元素即联系我们

有点像小提琴

fiddle ex

【讨论】：