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

Question

I am developing this site and for now I have not put any Javascript code in it to make it dynamic.

I have a problem that repeats itself in all projects for lack of knowledge of language and logic, following problem:

When I put the mouse on top of the menu, opens sub-menu but when taking the mouse off the menu to try to access the sub-menu like the menu loses focus, the sub-menu disappears before I focus on any of his items.

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

The code is normal:

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

Typical menu of Wordpress.

I noticed that this happens mainly if the sub-menu has at a margin of menu, problem that may run by the fact of sub-menu need to gain focus immediately after menu lose focus.

Answer 1

I don’t quite understand your question but I like to do this with css only. Your problem is that the menu cannot lose focus or the submenu will disappear. I suggest you "paste" your block with your submenu block. This can be done via absolute positioning for example. Ai in css you call:

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

The secret is you "paste" the element that will receive the Focus with the submenu element, so you can keep the submenu even after the menu loses focus.