[SOLUCIONADO] Mantener menu abierto si salgo de la capa que lo abrió

[suudobal]

Buenas, tengo un menú construido de esta manera (como me lo han pasado, no se puede cambiar la construcción):

Código HTML:

<span>Opción 1</span>
<ul>
<li>Subopcion 1-1</li>
<li>Subopcion 1-2</li>
<li>Subopcion 1-3</li>
</ul>
<span>Opción 2</span>
<ul>
<li>Subopcion 2-1</li>
<li>Subopcion 2-2</li>
<li>Subopcion 2-3</li>
</ul>
.....

Los UL están ocultos y cuando paso el ratón por los SPAN, con mouseenter se muestra el UL que tiene debajo. Todo bien hasta que trato de elegir una subopción, ya que se oculta el menú de nuevo (con mouseleave) y no hay manera de poder elegir una subopción. Si la opción estuviera dentro del UL hubiera sido más fácil pero no sé como decirle a jQuery que si estoy en la subopciones no se cierre el menú.

Gracias

[javy7v]

Puedes probar a añadir el submenu al codigo del jquery algo asi :

Código:

$('.nav-item, .submenu').on({
    mouseenter: function () {
        $('.submenu').show();
    },

Asi en teoria cuando estes sobre el se mostrara igualmente y pones mouseleave al submenu para salir.

Pero igual no funciona tengo el jquery un poco oxidado ahora mismo.

[suudobal]

Así no funciona. Pongo lo que tengo bastante resumido a ver si se puede aclarar:

Código HTML:

<span>Opción 1</span>
<ul>
<li>Subopcion 1-1</li>
<li>Subopcion 1-2</li>
<li>Subopcion 1-3</li>
</ul>
<span>Opción 2</span>
<ul>
<li>Subopcion 2-1</li>
<li>Subopcion 2-2</li>
<li>Subopcion 2-3</li>
</ul>
.....
 

Código Javascript:

$("span").on("hover", handleHover($("span")));
 
   function handleHover(e) {
 
        $(e).on({
            mouseenter: function() {
                $(this).next("ul").show();
            },
            mouseleave: function() {
                $(this).next("ul").hide();
            }
        });
 
    }
 

Si le añado al handleHover el ul, efectivamente entra pero sigue saliendo... Se me complica... Es decir, necesito indicar que aún sigo en el menú al tener el mouse sobre las subopciones para que no se cierre.

[suudobal]

Al final quedó solucionado con wrapAll que no conocía su utilidad en jQuery.