CCNA, CCNP, MCSA, CCNA Final Exam, All Answer Test Module With 100/100

I met some jquery menu mouseenter problem. How to fix when mouse enter p , the p still display block ? <script> $(document).ready(function() { $('a').mouseenter(function(){ $('p').css('display','none'); $(this).next('p').slideDown('slow'); }).mouseleave(function(){ $('p').slideUp('slow'); }); $('p').mouseenter(function(){ $(this).css('display','block'); });​ }); </script> <div> <a>menu1</a> <p>about us</p> <a>menu2</a> <p>contact</p> </div> <style> div{ position:relative; z-index:0; width:600px; height:20px; } p{ display:none; position:absolute; top:20px; left:0; width:300px; height:100px; background:#ccc; }​ </style> ​ Live demo: http://jsfiddle.net/KTvf7/

Is there a jQuery shortcut for this? $(element).on("mouseover", function() { $(this).addClass("hover"); }).on("mouseout", function() { $(this).removeClass("hover"); }); I see in the jQuery docs a method called hover() , but that seems to bind on events mouseenter and mouseleave (should I be using those events instead of mouseover and mouseout ?)