Chrome 中的边距问题

Question

我正在使用 megamenu 创建一个三列菜单，当每列超过 10 个项目时，该菜单会在右侧生成弹出窗口。弹出的“叶子”类是由 javascript 动态添加的。

第二列从 li #10 开始，因为每列有 10 个，

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

我将其放置在第一列的左侧并放置页边距顶部。

该问题仅发生在 chrome 中（IE9 和 Firefox 都可以）。

链接是 http://net-neutrality.freeenergymedia.com/

u=anonim p=01477410

html 看起来像这样

 <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

我添加了此代码来检查弹出菜单中的第一个列表项将在哪一行，然后在顶部添加边距。

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')


}


}