Home/ Questions/Q 680439
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T01:22:22+00:00

Hi I have the code below, once the first (only) item in the menu

  • 0

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).

<body>
<script type="text/javascript">
$(document).ready(function() 
 {


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

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

        function ()
        {

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

    }

        );    




}); 
</script> 

    <ul>  
       <li class="hover">  
            <p><a href="#">Hover</a></p>  
            <p class="subtext">Show More</p>  
        </li>  
    </ul>

Any advice?

Thanks

added css:

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;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you use this you are referencing the element that the event was bound to. In this case the LI element. You want to hide and show the P element only. Like this.

    HTML

    <ul>  
   <li class="hover">  
        <p><a href="#">Hover</a></p>  
        <p class="subtext" style="display: none;">Show More</p>  
    </li>  
</ul>

    jQuery

    $(document).ready(function() {
    $('li').hover(function() {
        $(this).children("p.subtext").slideDown("slow");
    },
    function() {
        $(this).children("p.subtext").slideUp("fast");
    });
});
    • 0