有错误的下拉菜单

【问题标题】：drop-down menu with errors有错误的下拉菜单
【发布时间】：2013-06-09 04:08:02
【问题描述】：

我会将 cmets 中的链接添加到我有疑问的代码中，以方便移植而不是代码问题。好吗？

我的问题是带有 jquery 的下拉菜单。当您将鼠标悬停在第一个菜单项上时，打开 jsFiddle 会很容易注意到。

就目前而言，当我通过鼠标时，他会离开菜单项，并且不知道如何在不干扰<li> 菜单的情况下增加必要的子菜单。

【问题讨论】：

代码链接：jsfiddle.net/n5VWn/1
我还是不行。我试图限制
子菜单，但不起作用，jquery 总是增加
菜单的宽度。我试图限制高度，在 bg_menu 中放置溢出，这样她就不会伴随幻灯片，但它会。

虽然 jsfiddle 链接真的很不错，但是不要忘记将相关代码添加到问题中以供下一个问题。该站点出于某种原因不允许仅发布 jsfiddle-link 问题。 ;)参考：Prevent posts with links to jsfiddle and no code

粘贴大量代码似乎是个坏主意，rsrsrsr。

完全同意，不要粘贴整个网站 - 尝试将其缩小到相关代码。用尽可能少的额外内容重新创建您的问题并将其粘贴到问题中。

标签： jquery html css drop-down-menu

【解决方案1】：

你可以使用：

.sub-menu { position:absolute; }

这样子菜单就从页面流中取出。它们的顶部和左侧位置默认为它们在常规页面流中的位置，但它们将不再向下推页面或扩展其 nav 容器。

在此更改之后，您必须相应地设置它们的样式。也就是说，父 li 的 padding 在使用默认的顶部/左侧位置时仍将它们推到右侧。你可以给子菜单一个负边距，或者更干净，从li 中删除填充并将它们的标题文本包装到一个带有填充的元素中，例如：

<li class="menu_li show-sub-menu">
    <span>Veículos</span>
    <ul class="sub-menu">
        <li><a href="#">Estoque</a></li>
        <li><a href="#">Cadastrar Veículo</a></li>
    </ul>
</li>

.menu_li > span, .menu_li > a { padding:0 14px; }

Fiddle

此外，还有很多现成的下拉导航菜单可用：http://www.cssreflex.com/2011/11/jquery-css-drop-down-menus.html/

【讨论】：