包含错误的下拉菜单

Question

我将在注释中添加我有疑问的代码的链接，以促进移植，而不是代码的问题。好的?

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

当我经过鼠标时，他离开了菜单项，并且不知道如何在不干扰<li>菜单的情况下增长必要的子菜单。

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

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