2012-02-22 72 views
1

我正在使用megamenu創建三列菜單,當每列獲得超過10個項目時,會向右彈出。彈出式「葉」類是通過javascript動態添加的。鍍鉻邊框問題

第二列開始於這裏#10,因爲有10到每一列

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

I位置它留下的第一列和所述緣部位置。

該問題只發生在鉻(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> 
+2

如果您的鏈接不需要登錄,您可能會獲得更多幫助。 – 2012-02-27 18:05:53

+0

「這是問題發生的地方,只有(Chrome IE9和Firefox)很好」 - 請你解釋一下這個問題。我可以看到爲第11和第12個菜單項目生成的第二列。 – neo108 2012-02-28 01:24:44

+2

適用於我的鉻 – 2012-02-29 23:08:59

回答

0

我加入這個代碼檢查什麼在彈出的菜單行的第一個列表項將會在頂部添加一個保證金。

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


} 


}