Menu en jquery y hacer desaparecer texto

[kitune]

Hola a todos,

Tengo un menu de la forma:

Código HTML:

<div id="menu">
			<ul class="sf-menu sf-vertical">
			<li><a href="/inicio">Inicio</a></li>
			<li class="current">
				<a href="#">Perfil</a>
				<ul>
					<li><a href="/equipo">Equipo</a></li>
					<li><a href="/estudio">Estudio</a></li>
					<li><a href="/premios">Premios</a></li>										
				</ul>
			</li>	
                         </ul>
</div> 

Es un menu desplegable, y lo que quiero es que mientras esté dentro del menu abriendo pestañas (mouseover) desaparezca una capa que tengo en otro sitio. Y cuando ya salgas del menu vuelva a aparecer.

He probado a hacer:

Código PHP:

  $('#menu ul li li').mouseover(function() { 
  $('#secciones').fadeOut(); 
}); 
 
$('#menu').mouseout(function() { 
  $('#secciones').fadeIn(); 
});  
   

Pero al pasar el raton por un submenu que se acaba de abrir lo detecta como salida de menu y me hace la animación completa de aparicion y desaparicion...

[Naahuel]

Usa mouseleave en lugar de mouseout y mouseenter en lugar de mouseover. Leé la documentación de cada uno.

Pensé que querías que funcione con un submenu. Algo así:

Código Javascript:

$(function(){
  $('#menu ul li ul').mouseenter(function() { 
    $('#secciones').fadeOut(); 
  })
    .mouseleave(function() { 
    $('#secciones').fadeIn(); 
  });  
});
 

-edit-

Creo que esto es lo que querés:

Código Javascript:

$(function(){
  $('#menu ul li ul').mouseenter(function() { 
    $('#secciones').fadeOut(); 
  });
    $('#menu').mouseleave(function() { 
    $('#secciones').fadeIn(); 
  });  
});