$(document).ready(function(){
  var $slide_down_speed = 300;    // speed which the menu slide down
  var $slide_up_speed = 0;        // speed which the menu slide up
  var $dropdown_menu_width = 210; // width of the dropdown menu (if you change that in CSS, please change it here)
  var $level = 0;                 // actual level of dropped menu (PLEASE DONT CHANGE!!)
  
  $("#navigation ul li").hover(
    // MOUSE IN
    function() {
      $(this).find("ul:first").stop(true, true).slideDown($slide_down_speed);
      if ($level == 0) {
        // ONLY IF THE DROPDOWN LEVEL IS HIGHER THEN FIRST, WE HAVE TO CHANGE THE LEFT POSITION OF DROPDOWN
        //$(this).find("a:first").removeClass("page-item");
        $(this).find("a:first").addClass("main_category");
        //$(this).find("ul:first").css("top", 0);
      }
      if ($level > 0) {
        // ONLY IF THE DROPDOWN LEVEL IS HIGHER THEN FIRST, WE HAVE TO CHANGE THE LEFT POSITION OF DROPDOWN
        $(this).find("ul:first").css("left", $dropdown_menu_width);
        $(this).find("ul:first").css("top", 0);
      }
      // here we changing the ODD and EVEN classes of the dropdown menu
      $(this).find("ul:first").children("li").children("a:odd").addClass('odd');
      $(this).find("ul:first").children("li").children("a:even").addClass('even');
      $level++;
    },
    // MOUSE OUT
    function () {
      $(this).find("ul").stop(true,true).slideUp($slide_up_speed);   // slide up the CSS
      if ($level == 1) {
        // ONLY IF THE DROPDOWN LEVEL IS HIGHER THEN FIRST, WE HAVE TO CHANGE THE LEFT POSITION OF DROPDOWN
        $(this).find("a:first").removeClass("main_category");
      }
      $level--;
    }
  );
});