I used Superfish to display menu and submenus in horizontal style. As you know in Superfish all the submenus are left align. I want to align the sub-menus centered according to the main menu. I thought to find out the width of a sub-menus item. As in super-fish there is delay in appearance of sub-menus so I can't get the width of submenu item becuause I am using ' onShow'.

Then in superfish  onBeforeShow I cloned the item in DIV and tried to find out its width. But the problem is the width of item is different in  onBeforeShow and  onShow.  I could not figure out what I am doing wrong. 

1. 
   
2.  jQuery(document).ready(function () {
3.                
4.                 jQuery('ul.sf-menu').superfish({
5.                     pathClass: 'current',
6.                     onBeforeShow: function () {
7.                         getItem($(this), 'onBeforeShow');
8.                     },
9. 
   
10.                     onShow: function () {
11.                         getItem($(this), 'onShow');
12.                     }
13.                 });
14.                
15. 
    
16. 
    
17.                 //Real Width of Element even if element/parents are hidden
18.                 function getItem(item,triggerBy) {
19.                     var lastSub = (item).closest('li').attr('id');
20.                     var $subMenuFirstItem = $('#' + lastSub + ' li:Last');
21.                     console.log('RealWidth: ' + $subMenuFirstItem.elementRealWidth() + ' Width: ' + $subMenuFirstItem.width() + '  Trigger: ' + triggerBy);
22.                    
23.                 }
24. 
    
25.                 $.fn.elementRealWidth = function () {
26.                     /*var $clone = this.clone()
27.                         .css("visibility", "hidden")
28.                         .appendTo($('body'));
29.                         */
30.                     var $clone = this.clone().appendTo($('#EmptyDummy'));
31.                     
32.                     var $width = $clone.children().width();
33.                    // $clone.remove();
34.                     return $width+' - '+this.text();
35.                 };
36. 
    
37.             });