Question

enter image description here

以下是我所面临的问题的截屏。下拉菜单应该出现在顶部菜单的第二个菜单项下。

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完美呈现。我无法弄清问题是什么。至少有一个我可以用于这两个浏览器的修复程序吗？或另一种解决这个问题的方法。

提前告诉你。

Answer 1

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

Answer 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元素，即 cntact us

有点小提琴

fiddle ex

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

2 个答案: