我会将评论中的链接添加到我有疑问的代码中,以方便移植而不是代码问题。好的?
我的问题是带有 jquery 的下拉菜单。当您将鼠标悬停在第一个菜单项上时,打开 jsFiddle 会很容易注意到。
就目前而言,当我通过鼠标时,他会离开菜单项,并且不知道如何在不干扰菜单的情况下增长必要的子<li>
菜单。
我会将评论中的链接添加到我有疑问的代码中,以方便移植而不是代码问题。好的?
我的问题是带有 jquery 的下拉菜单。当您将鼠标悬停在第一个菜单项上时,打开 jsFiddle 会很容易注意到。
就目前而言,当我通过鼠标时,他会离开菜单项,并且不知道如何在不干扰菜单的情况下增长必要的子<li>
菜单。
您可以使用:
.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/