悬停时CSS导航菜单向右滑动

Question

我有一个导航菜单，我想要一个用于子页面的下拉菜单。我创建了它，一切都很好，除了当我将页面链接与子页面悬停时，当下拉菜单显示时，顶部菜单中的页面链接滑到右侧。 我在这里想念什么？ 提前感谢您的帮助。

---

这里是 jsfiddle： jsfiddle.net/AC8XK/

我所拥有的并不是 100% 那样，因为有很多遗漏，但它恰好显示了我提到的问题。

---

我设法让菜单正常工作。正如迈克所说，最初问题的解决方案是将下拉 ul 位置 从 relative 更改为 absolute。

关于下拉菜单的定位，我用padding-top代替top或margin-top解决了这个问题>.

感谢所有尝试提供帮助的人。

Answer 1

您在 jsfiddle 中提供的代码是……嗯……有点乱。我不得不剥离很多内容并为下拉菜单生成一些基本格式。我将评论重要的部分，但它应该或多或少地复制和粘贴。代码仅是菜单的布局文本 - 没有视觉或位置样式。

关键概念： 1 - 将您的 LI 设置为 width:auto，将 li>ul 设置为 position: absolute;width:100%。这允许定位并确保各个ul ul lis 位于不同的行上。 2-您的display:none 和display:block 正确。或者，您可以将屏幕外定位用于相同目的。 3-记得做ul ul {position:absolute;}以允许子菜单相对于父li定位！

HTML：

<div class="greenbar">
<nav>
    <ul id="menu-navigation-menu" class="navigation">
        <li id="menu-item-107" class="menu-item"><a href="#">About</a>
            <ul class="sub-menu">
                <li id="menu-item-116" class="menu-item"><a href="#">Terms of Use</a></li>
                <li id="menu-item-119" class="menu-item"><a href="#">Just another link</a></li>
            </ul>
        </li>
        <li id="menu-item-106" class="menu-item"><a href="#">Services</a>
            <ul class="sub-menu">
                <li id="menu-item-120" class="menu-item"><a href="#">Another link again</a></li>
            </ul>
        </li>
        <li id="menu-item-105" class="menu-item"><a href="#">Clients</a></li>
        <li id="menu-item-104" class="menu-item"><a href="#">Resources</a></li>
    </ul>
</nav>
</div> 

CSS：

nav ul {
list-style-type: none;
position: relative;
display: inline-table;
}
nav ul li {float: left;}
nav ul li a { display: block; text-decoration: none;}
nav ul ul {
display: none;
position: absolute;
width: auto;
}
nav ul li:hover > ul { display: block;}
nav ul ul li { width: 100%;}