Question

I am using megamenu to create a three column menu that generates flyouts to the right when each column gets past 10 items. the flyout “leaf” classes are added dynamically by javascript.

the second column starts at this li #10 as there are 10 to each column

.leaf-10 {
  margin-left: 251px !important;
  margin-top: -320px !important;
}

I position it left of the first column and position the margin-top.

the problem only happens in chrome (IE9 and Firefox are fine).

the link is http://net-neutrality.freeenergymedia.com/

u=anonim
p=01477410

html looks like this

 <div class="content">
      <ul id="megamenu-primary-links" class="megamenu-menu horizontal megamenu-skin-nice"><li id="megamenu-mlid-1510" class="megamenu-parent megamenu-parent-0 odd half-1 leaf-0 first first"><h2 class="megamenu-parent-title"><a href="/about" class=" menu-1510">About Internet Society</a></h2></li>
<li id="megamenu-mlid-394" class="megamenu-parent megamenu-parent-1 even half-1 leaf-1 active active-trail"><h2 class="megamenu-parent-title"><a href="/message-topics" class=" active active-trail menu-394 active">Message Topics</a></h2><ul class="megamenu-bin megamenu-slots-columnar"><li id="megamenu-mlid-1512" class="megamenu-slot megamenu-slot-0 odd half-1 leaf-0 first first"><h3 class="megamenu-slot-title"><a href="/node/222" class=" menu-1512">DNS Blocking/Filtering</a></h3></li>
<li id="megamenu-mlid-1494" class="megamenu-slot megamenu-slot-1 even half-1 leaf-1"><h3 class="megamenu-slot-title"><a href="/message-topics/human-rights" class=" menu-1494">Human Rights</a></h3></li>
<li id="megamenu-mlid-1507" class="megamenu-slot megamenu-slot-2 odd half-1 leaf-2"><h3 class="megamenu-slot-title"><a href="/message-topic/ipv6" class=" menu-1507">IPv6</a></h3></li>
<li id="megamenu-mlid-1508" class="megamenu-slot megamenu-slot-3 even half-1 leaf-3"><h3 class="megamenu-slot-title"><a href="/message-topic/intellectual-property-rights" class=" menu-1508">Intellectual Property Rights</a></h3></li>
<li id="megamenu-mlid-688" class="megamenu-slot megamenu-slot-4 odd half-1 leaf-4"><h3 class="megamenu-slot-title"><a href="/message-topic/internet-access" class=" menu-688">Internet Access</a></h3></li>
<li id="megamenu-mlid-1521" class="megamenu-slot megamenu-slot-5 even half-1 leaf-5"><h3 class="megamenu-slot-title"><a href="/message-topic/test-topic-3" class=" menu-1521">Net Neutrality 1</a></h3></li>
<li id="megamenu-mlid-689" class="megamenu-slot megamenu-slot-6 odd half-2 leaf-6"><h3 class="megamenu-slot-title"><a href="/message-topic/net-neutrality" class=" menu-689">Net Neutrality</a></h3></li>
<li id="megamenu-mlid-1520" class="megamenu-slot megamenu-slot-7 even half-2 leaf-7"><h3 class="megamenu-slot-title"><a href="/message-topic/url-path-settings" class=" menu-1520">Privacy 1</a></h3></li>
<li id="megamenu-mlid-690" class="megamenu-slot megamenu-slot-8 odd half-2 leaf-8"><h3 class="megamenu-slot-title"><a href="/message-topic/security" class=" menu-690">Security</a></h3></li>
<li id="megamenu-mlid-1519" class="megamenu-slot megamenu-slot-9 even half-2 leaf-9"><h3 class="megamenu-slot-title"><a href="/message-topic/security-1" class=" menu-1519">Security1</a></h3></li>
<li id="megamenu-mlid-1526" class="megamenu-slot megamenu-slot-10 odd half-2 leaf-10 last last"><h3 class="megamenu-slot-title"><a href="/node/245" class=" menu-1526">test menu column 2</a></h3></li>
</ul></li>
<li id="megamenu-mlid-392" class="megamenu-parent megamenu-parent-2 odd half-2 leaf-2"><h2 class="megamenu-parent-title"><a href="/resources" class=" menu-392">Resources</a></h2></li>
<li id="megamenu-mlid-893" class="megamenu-parent megamenu-parent-3 even half-2 leaf-3 last last"><h2 class="megamenu-parent-title"><a href="/contact" class=" menu-893">Support</a></h2></li>
</ul>    </div>

Answer 1

i added this code to check what row the first list item in the flyout menu will be then add a margin to the top.

if($(".megamenu-bin li").hasClass('leaf-20')){
   k=36;
   //Set the width 
   $(".megamenu-bin").addClass('mega-width-three')

   for(i=1;i<=9;i++){
     $(".megamenu-bin li.leaf-2"+i).css('top',k+'px') ; 
     k=k+30;
   }

}else{

if($(".megamenu-bin li").hasClass('leaf-10')){
       k=36;
    //Set the width 
   $(".megamenu-bin ").addClass('mega-width-two')

    for(i=1;i<=9;i++){

     $(".megamenu-bin li.leaf-1"+i).css('top',k+'px') ; 
     k=k+30;
   }
}else{

   $(".megamenu-bin").addClass('mega-width-single')


}


}