slidedown menubar with children,siblings

by stackmanoz

HTML

<div class="menu-bar">
    <div class="menu-header">
        <ul><li><a href="#">Home</a>
            <p>Innercore of Subject Header</p></li>
            <li><a href="#">Subject</a>
                <p>Innercore of Subject Header</p></li>
            <li><a href="#">Class</a>
            <p>Innercore of Subject Header</p></li></ul>
    </div>
</div>

CSS

.menu-header ul
{
    list-style:none;
    
}
.menu-header ul li
{
    background:#98bf26;
    padding:5px;
    width:100px;
    text-align:center;
    border-bottom:1px solid white;
}
.menu-header ul li a
{
    text-decoration:none;
    color:white;
    font-weight:normal;
    font-family:sans-serif;
    font-size:17px;
position:relative;    
  
}
.menu-header ul li p
{
    display:none;
}

JavaScript

$(function(){
$('.menu-header ul li a',this).hover(function(){      
     $(this).next("p").slideToggle(100);
},
                                     function(){
                                         $(this).siblings('a').hide(100);
                                     }
                                     );
});