Problem with mouseout and looking for alternative to hide() and show()?

I'm using jQuery to create a simple, but large dropdown menu. I have some questions redarding this and 开发者_运维知识库hoping to get some help.

First, when I hover with the mouse over the link 'meny_1' with the mouseover() function the submenu 'undermeny_a' displays with the show() function. The submenu is inside a div called 'undermeny_1'. With mouseout() function the div is removed. But if I divide that div into other divs, the mouseout() function will not work. It's like it's not detecting the main div 'undermeny_1' any more? I wonder how to solve this?

Second, I wonder if there are any alternative to use show() and hide(). I want the div element to be in the background above the pages other div element but not visible until i hover the mouse above the link 'meny_1'? In plain javascript I used to use visibility or hidden, something that could be done with jQuery? Hide something without remove the element? Preciate some help. Thanks!

$(document).ready(function() {   
    $("#meny_1").mouseover(function(){
        $("#underMeny_1").show();
    });
    $("#underMeny_1").mouseout(function(){
        $("#underMeny_1").hide();<br/>
    });<br/> 
});

In regards to the mouse events, the jQuery API for mouseleave() shows the difference between mouseleave() and mouseout() that might help you out.

In essence, the mouseenter() / mouseleave() events trigger when the mouse enters or leaves the bounds of the element. Where the mouseover() / mouseout() events trigger whenever the mouse moves from one <div> to another.

If I understand your visibility issue, show() and hide() can work the same was as you did before hide(0) will hide the element immediately. Is there a different effect you wanted?

you can try toggle(). I am not sure what exaclty you want. toggle() is another available alternative for show() and hide(). which hides a element if it's visible and vice versa

You could try with animate / (fadein/fadeout) / fadeout.

Why dosen't the menu remove when you mouseout from the menu, then you could use the .hover() method. And why is it not a ul list?

To answer your second question: Hide something without remove the element? to hide using jquery you can use $("#div").hide() or $("#div").css("display", "none");

If you are looking for a fade effect, then you can go with fadein/fadeout in place of show/hide.

However if all you want is to do visibility hidden, and no effect then, In place of show/hide I personally prefer to create a hide css class like this.

.hide{display:none; !important}

and then use .addClass(hide) / .removeClass(hide)

more details at http://www.nitinh.com/2011/05/how-to-properly-hide-and-show-elements-using-javascript/

Regarding you first point, I am not sure if I understood it correctly. It'd be better if you could give us a demo link.