jquery mouseenter mouseout in menu

Question

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/

Answer 1

Fixed it for ya..

  $('a').mouseenter(function(){
    $('p').css('display','none');
    $(this).next('p').slideDown('slow');});
$('p').mouseleave(function(){
    $('p').slideUp('slow');
});
$('p').mouseenter(function(){
    $(this).css('display','block');
});