jquery 'this' confusion
<p>Hi I have the code below, once the first (only) item in the menu is hovered over, the subtext should appear. I have used 'this' as I thought it should find the class with the "li" and then slideDown. This doesnt seem to work, although 'this' works for when you remove the hover, as it slides up (top part not the subtext).</p>

<pre><code>&lt;body&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function() 
 {


    $('li').hover(function() 
        {

            $(this).stop(true, true).slideDown();                   
        $(this).slideDown("slow");                  
        },

        function ()
        {

         $(this).slideUp("fast");

    }

        );    




}); 
&lt;/script&gt; 

    &lt;ul&gt;  
       &lt;li class="hover"&gt;  
            &lt;p&gt;&lt;a href="#"&gt;Hover&lt;/a&gt;&lt;/p&gt;  
            &lt;p class="subtext"&gt;Show More&lt;/p&gt;  
        &lt;/li&gt;  
    &lt;/ul&gt;  
</code></pre>

<p></p>

<p>Any advice?</p>

<p>Thanks</p>

<p>added css:</p>

<pre><code>ul
{  
     margin:0;  
     padding:0;  
}  

li
{  
     width:100px;  
     height:50px;  
     float:left;  
     color:191919;  
     text-align:center;  
     overflow:hidden;  
}  

a
{  
     color:FFF;  
     text-decoration:none;  
}  

p
{  
     padding:0px 5px;  
}  

.subtext
{  
         padding-top:15px; 
         background-color: #6AA63B; 
}  


.hover
{
    background-color: #6AA63B;
}  
</code></pre>
