What is the best logic to implement sub-menu with mouse events

Question

What is the best logic to implement sub-menu with mouse events

Navigation

#1 by (2 votes)

1

I'm developing this site and for now I have not put any JavaScript code in it to make it dynamic.

I have a problem that is repeated in all projects because of lack of knowledge of language and logic, the following problem:

When I hover over menu , it opens sub-menu but when I hover the mouse over menu to try to access sub-menu as menu loses focus, sub-menu disappears before I focus on any item of it.

Every time I end up resolving with gambiarra but I would like to understand the logic of solving it.

The code is normal:

<ul class="menu">
    <li>
        <a href="#">Categoria</a>
        <ul class="sub-menu">
            <li>Sucategoria</li>
        </ul>
   </li>
</ul>

Typical Wordpress menu.

I've noticed that this happens mainly if the sub-menu has a menu margin, a problem that can be caused by sub-menu needing to gain focus immediately after menu lose focus.

html jquery css

asked by anonymous 26.02.2015 / 16:05

1 answer

Change object in another method How to make a dropdown menu open by clicking on top and close when you hover the mouse over it

score 2 · Answer 1

I did not quite understand your question but I like doing this with css only. Your problem is that the menu can not lose focus unless the submenu even disappears. I suggest you to "paste" your block with the block of your submenu. This can be done via absolute positioning for example. Already in css you call:

.menu ul li:hover a .sub-menu {
    display: block
}

The very secret is that you "paste" the element that will receive the focus with the element of the submenu, because from there you can keep the submenu even after the menu loses focus.