jQuery(document).ready(function(){
  var topLevelInactiveTabs = jQuery('#mydroplinemenu>ul>li:not(:has(ul))>a'); /* identify the different elements... */
  var topLevelActiveTabs = jQuery('#mydroplinemenu>ul>li:has(ul)>a');
  var subMenus = jQuery('#mydroplinemenu>ul>li:has(ul)>ul');
  topLevelActiveTabs.append('<' + 'img src="http://westernaspect.co.uk/popoutdev_v3/down.gif" style="border:0; padding-left: 2px" alt="down" /' + '>'); /* add down arrow active tabs */
  jQuery("li:has(ul)>a", subMenus).append('<' + 'img src="http://westernaspect.co.uk/popoutdev_v3/down.gif" style="border:0; padding-left: 2px" alt="down" /' + '>'); /* add down arrow active tabs */
  topLevelInactiveTabs.hover( function () { topLevelActiveTabs.removeClass("highlight"); subMenus.css({visibility:'hidden'}); }, function () {} ); /* hide all sub menus when new tab is selected */
  window.onresize = function() { /* bypass positon problem... */
    subMenus.css({visibility:'hidden'});
    topLevelActiveTabs.removeClass("highlight");
  };
  jQuery('#mydroplinemenu>ul>li:has(ul)').hover( /* active tab actions */
    function () {
      topLevelActiveTabs.removeClass("highlight"); /* hide all top level tabs */
      subMenus.css({visibility:'hidden'}); /* hide all sub menus */
      jQuery("a:eq(0)", this).addClass("highlight"); /* highlight active tab anchor */
      var totalWidth = 0; /* calculate total width of UL by summing LIs... */
      jQuery(">ul>li", this).each(function() { totalWidth = totalWidth + jQuery(this).outerWidth(); });
      var tabpositionleft = jQuery(this).position().left - jQuery("#mydroplinemenu").position().left; /* get position of tab on page, less a bit */
      jQuery("ul:eq(0)", this).css({left: jQuery("#mydroplinemenu").position().left, top: jQuery(this).position().top + jQuery(this).height(),'padding-left': tabpositionleft, width: jQuery('#mydroplinemenu').width() - tabpositionleft, visibility:'visible'}); /* position and display sub menu */
      jQuery('li:has(ul)', this).hover( /* sub sub menu actions */
        function () {
          jQuery("ul:visible", subMenus).css({visibility:'hidden'}); /* hide all sub sub menus */
          jQuery("a:eq(0)", this).addClass("highlight"); /* add tab highlight */
          var widest = 0;/* get widest sub nav width */
          jQuery("ul:eq(0)>li", this).each(function() { if (jQuery(this).outerWidth() > widest) { widest = jQuery("a", this).outerWidth(); } });
          jQuery("ul:eq(0)", this).css({width: widest, left: (jQuery("a:eq(0)", this).position().left), top: jQuery(this).height(), visibility:'visible'}); /* position and display sub menu */
          if ((jQuery("ul:eq(0)", this).position().left + jQuery("ul:eq(0)", this).width()) > jQuery("#mydroplinemenu").width()) { /* move sub menu if it's off the edge of the screen */
            jQuery("ul:eq(0)", this).css({left: (jQuery("#mydroplinemenu").width() - (jQuery("ul:eq(0)", this).width() + 12))});
          }
        },
        function (){
          jQuery("ul", subMenus).css({visibility:'hidden'}); /* hide all sub sub menus */
          jQuery("a:eq(0)", this).removeClass("highlight"); /* remove tab highlight */
        }
      );
    }, function () {
      /* add menu inactive function here */
      topLevelActiveTabs.removeClass("highlight"); /* hide all top level tabs */
      subMenus.css({visibility:'hidden'}); /* hide all sub menus */
    }
  ); /* hover */
});