Question

I want have animation on hovering a

which shall slide from top and on mouseout it shall slidetop.
I have done all but there is a little problem.
Please view my demo here

My codes are
CSS

    #nav{width:200px;
height:60px;
background:#096;
list-style:none;
} 

 #nav li
 {
     width:200px;
     height:60px;
     float:left;
     position:relative;

}

     #nav li a
     {
         width:200px;
         height:50px;
         background:#09F;
         color:#000;
         display:block;
         position:relative;
         margin:0;
         z-index:100;

         }

         #nav li a:hover
         {
             color:#fff;
             }

         #nav li .hover
         { width:200px;
         height:50px;
         background:#000;
         color:#0FF;
        display:none;
       background-position:0 0;
       position:absolute;
       top:0;
         margin:0;
         z-index:0;
         opacity:0.9;

             }

Script

$(document).ready(function()
 {    
  $('#nav li a').append('<div class="hover">');

  $('#nav li a').hover(function (){
      $('.hover').stop(true, true).slideDown('1000');    

        }, 

        //Mouseout, fadeOut the hover class
        function() {

            $('.hover').stop(true, true).slideUp('1000');   

    }).click (function () {

        //Add selected class if user clicked on it
        $(this).addClass('selected');


      });
});

HTML

<ul id="nav">

   <li><a href="index.html">Home</a></li>


  </ul>

But I am viewing only the .hover div is sliding but my Home text is not viewing. I have added z-index to tag also but then also the text is not viewing while slide is working.

Please help me to sort it out.
Thanks to everyone in advance.

Answer 1

Set z-index: -1 for .hover. It will solve the problem.

DEMO: http://jsfiddle.net/DSusn/2/

And pay attention to your fadeIn and fadeOut calls. If you need to set speed as number of milliseconds, its’ arguments should be an integer, i.e. without quotes fadeIn(1000).