Question

<script>
$("#menu-item-58").mouseover(function() { $("#simple_sidenav-3").css('visibility','visible'); });
$("#menu-item-58").mouseout(function() { $("#simple_sidenav-3").css('visibility','hidden'); });
</script>

#simple_sidenav-3 {
    visibility:hidden;
}

simple_sidenav-3 is a hidden div.
So why doesn’t it show when mouse is over #menu-item-58?

Please check it here http://mentor.com.tr/wp/?page_id=164

Answer 1

Try changing #simple_sidenav-3 from visibility:hidden; to display:none; Then call something like .slideDown() for a nice effect.

Also, here’s some improvements to your code:

jQuery(function() { //waits till the document is ready
    jQuery("#menu-item-58").mouseover(function () {
        jQuery("#simple_sidenav-3").slideDown();
    }).mouseout(function () {  //no need to use $("#menu-item-58") twice
        jQuery("#simple_sidenav-3").slideUp();
    });
});