drop-down menu with errors

问题:

I'll add the link in the comments to the code I'm with doubt, to facilitate graft and not the question of code. ok?

My problem are a drop-down menu with jquery. When you open the jsFiddle will easily notice when you hover on the first menu item.

And as it stands, he away menu items when I pass the mouse, and do not know how to grow submenu necessary without interfering with <li> menu.

回答1:

You can use:

.sub-menu { position:absolute; }

So that the sub menus are taken out of the page flow. Their top and left positions are default to where they'd be in the regular page flow, but they will no longer push down the page nor extend their nav container.

You will have to style them accordingly after this change. That is, the parent li's padding still pushes them to the right while they use the default top/left positions. You may give the sub menus a negative margin, or more cleanly, remove the padding from the li and wrap their heading text into an element with padding e.g.:

<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

---

Also, there are a lot of ready-made dropdown nav menus available out there: http://www.cssreflex.com/2011/11/jquery-css-drop-down-menus.html/