simple jquery, css drop down effect

In this post you will found that how to make simple jquery drop down effect on mouseover. For this first we will create the menus with the help of html and css. Here are some html :

code:

 
  
Home
  
About us
  
Products

   
    
Product 1
    
Product that we need
    
Product 3
    
Product 4
    
Product 5
   
  
  
Contact Us
  
Enquiry
 

After these html code now we have to give some css styles like this:

#main_menu, 
#sub_menu{
 list-style: none;
}

#main_menu > li{
 display: inline;
}

#main_menu > li a{
 padding: 4px 10px;
 background: #dd6600;
 color: #ffffff;
 text-decoration: none;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 13px;
 position: relative;
}

#main_menu > li a:hover{
 background: green;
}

#main_menu > li ul{
 position: absolute
}

#main_menu > li ul li{
 margin-bottom: 10px !important;
 margin-left: 2px;
}

#main_menu > li ul li a{
 padding-left: 8px;
}

#sub_menu{
 left: 191px;
 top: 39px;
 margin: 0px;
 padding:10px 10px 10px 0;
 background: green;
 border-radius: 0 5px 5px 5px;
 border: 1px solid #333;
}

#sub_menu li a{
 background: #fff;
 color: #000;
}

#sub_menu li a:hover{
 background: #dd6600;
}
#main_menu > li ul li{
 margin-bottom: 5px;
}

Now the final code, i mean the jquery effect. I used .animate() instead of .fadeIn() and .fadeOut(). Here is the jquery codes:

$(function(){
  $('#sub_menu').hide();
  $('li.sub-men').hover(function(){
   $('#sub_menu').css('opacity', 0)
        .slideDown('slow')
        .animate(
       {opacity: 1},
       {queue: false, duration: 'slow'}
        );
  }, 
  function(){
   $('#sub_menu').css('opacity', 1)
        .slideUp('slow')
        .animate(
       {opacity: 0},
       {queue: false, duration: 'slow'}
        );
  });
 });