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

我有一个导航菜单，我想有一个子页面的下拉菜单。我创建了它，一切正常，除了当我将页面链接与子页面悬停时，下拉菜单显示时，顶部菜单中的页面链接向右滑动。 我在这里错过了什么？ 提前谢谢你的帮助

---

以下是JSFIDLE： jsiddle.net/AC8XK/

我所拥有的并不是100%的那样，因为缺少了很多，但这恰恰说明了我提到的问题

---

我设法让菜单正常运行。正如mike所说，最初问题的解决方案是将下拉列表的位置从相对更改为绝对。

至于下拉列表的定位，我使用填充顶部而不是顶部或边距顶部解决了问题。

---

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

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

关键概念：1-将LIs设置为

width:auto

，将li>ul设置为

位置：绝对；宽度：100%

。这允许定位并确保单个

ul li

s位于单独的线路上。 2-您的

显示：无

和

显示：块

正确。或者，您也可以出于同样的目的使用屏幕外定位。 3-记住执行

ul ul{position:absolute；}

以允许相对于父

li

定位子菜单

HTML:

---

你需要展示一些代码，这样我们才能看到发生了什么。发布一些代码作为示例。我有一种预感，您显示的列表项（假设您使用的是列表进行导航）不正确，因此顶级项必须移动，以便为子项留出水平空间，即使它们不会在发布代码上正常重叠+1，或者更好，请执行JSFIDDLE，这应该是问题所在。我有绝对位置，但下拉菜单将显示在导航菜单上方的某个位置（菜单不在顶部），因此我将其更改为相对位置，从而允许下拉菜单显示在页面链接下方。所以，我必须把它改回绝对值，但是我如何让它显示在链接下面呢？使用边距？我将其更改为绝对，并设法将其放置在我想要的位置，但现在我无法悬停下拉列表，因为当我尝试悬停它时，它会消失。你知道为什么会这样吗？我不确定是什么问题。我添加了

位置：绝对到您的JSFIDLE，并调整了ul的位置，效果很好。也许您可以在原始问题中添加实际代码？谢谢回答。检查更新的fiddle:jsfiddle.net/AC8XK/1/我将位置更改为绝对位置，并根据自己的喜好调整位置。当您将鼠标悬停在“关于”链接上并尝试转到下拉列表时，它将消失。附言：我加了页边空白：5px；这是为了让它看起来更好。在站点中，它有一个灰色条，所以大致相同。@AlexAlexandre您是想严格使用javascript还是可以使用jquery？
<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> 

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%;}