1

在此处输入图像描述

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

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

提前告诉你。

4

2 回答 2

3

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

于 2013-11-07T11:13:31.213 回答
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元素，即联系我们

一种小提琴

小提琴前

于 2013-11-07T11:12:58.297 回答