$(document).ready(function(){
  $("#submenu ul.main li a").hover(function(e){
    $(this).css("background-color", "#d2d2d2");
    
    var elemUlSub = getSubElement(this);
    if (elemUlSub && elemUlSub.css("display") == "none"){
      var offsetDivSubmenu = $("#submenu").offset();
      var offsetElemLi = $(this).parent().offset();        
      elemUlSub
      .css("top",(offsetElemLi.top - offsetDivSubmenu.top + 35) + "px")
      .css("left",(offsetElemLi.left - offsetDivSubmenu.left + 30) + "px")
      .css("display", "block");      
      
      elemUlSub.mouseleave(function(e){
        var elemAHrefItem = getElemMain(this);
        if (elemAHrefItem){
          if (!isElemHovered(e, elemAHrefItem)){
            $(this).hide();
            elemAHrefItem.css("background-color", "transparent");
          }
        }
      });
    }
    },
  function(e){          
    var elemUlSub = getSubElement(this);
    if (elemUlSub){
      if (!isElemHovered(e,elemUlSub)){
        elemUlSub.hide();
        $(this).css("background-color", "transparent");
      }
    } else {
      $(this).css("background-color", "transparent");
    }
  });
  
  function getSubElement(ths){
    var qElemLi = $(ths).parent();
    if (qElemLi && qElemLi[0].id != ""){
      idUlSub = qElemLi[0].id;
      idUlSub = idUlSub.replace('item','sub');      
      return $("#submenu ul#" + idUlSub);
    }
    return null;
  }
  
  function getElemMain(ths){
    var elemUlSub = $(ths);
    if (elemUlSub && elemUlSub[0].id != null){
      idElemLiItem = elemUlSub[0].id;
      idElemLiItem = idElemLiItem.replace('sub','item');
      return $("#submenu ul.main li#" + idElemLiItem + " a");
    }
    return null;
  }
  
  function isElemHovered(e,elem){
    if (elem){
      var w = elem.outerWidth();
      var h = elem.outerHeight();
      var o = elem.offset();
      var p = elem.position();
      if (o.left <= e.pageX && (o.left+w) >= e.pageX && o.top <= e.pageY && (o.top+h) >= e.pageY){
        return true;
      }
    }
    return false;
  }  
});