菜單jquery的子項向右移

這是我的菜單，我有一個ie6的問題，事實上這是一個下拉菜單，子項目菜單在ie6中右移，使菜單無用...菜單jquery的子項向右移

這裏的html：

 <div id="navigation"> 
     <a href="<?php echo base_url();?>" class="single">Home</a> 

     <div class="menu_item">Azienda 
      <div class="submenu"> 
       <a href="#">Link</a> 
       <a href="#">Link</a> 
       <a href="#">Link</a> 
      </div> 
     </div> 

     <div class="menu_item">Servizi 
      <div class="submenu"> 
       <a href="#">Link</a> 
       <a href="#">Link</a> 
       <a href="#">Link</a> 
      </div> 
     </div> 
        </div>

這是CSS：

#navigation{ 
    width: 905px; 
    height: 30px; 
    margin: 0px auto; 
    padding-left: 150px; 
} 
#navigation img{ float: left; vertical-align: top;} 
.single { 
    float: left; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    color: #bfcee3; 
    text-decoration: none; 
    padding-left: 10px; padding-right: 10px; 
    margin-top: 20px; 
} 
.single:hover{color: #fff;} 
.menu_item{ 
    padding-left: 10px; padding-right: 10px; 
    margin-top: 20px; 
    float: left; 
    height: 35px; 
    text-indent: 8px; 
    overflow: hidden; 
    position: relative; 
    z-index: 10000000; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    color: #bfcee3; 
    text-decoration: none; 
} 
.submenu{ 
    position: absolute; 
    top: 15px; 
} 
.submenu a{ 
    display: block; 
    width: 100px; 
    height: 15px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 15px; 
    color: #bfcee3; 
    text-decoration: none; 
} 
.submenu a:hover{ 
    /*background: #181818;*/ 
    color: #fff; 
} 
.menu_item:hover{ 
    overflow: visible; 
    /*background: #e0e0e0; 
    color: #181818;*/ 
}

這Jquery的：

$(".submenu").slideUp(100, function() { 
     $(".menu_item").css({overflow:'visible'}) 
    }); 
    $(".submenu").css({display:'none'}); 
    $(".menu_item").hover(function(){ 
     $(this).stop().animate({ 
      marginTop: "0px" 
     }, 300, function() { 
      $(".submenu", this).slideDown(300); 
     }); 
    }, function() { 
     $(".submenu", this).slideUp(300, function() { 
      $(this).parent().stop().animate({ 
       marginTop: "20px" 
      }, 300); 
     }); 
    } 
);

來源

2011-02-04 Pierluigi Ballatore

IMO - 如果可能，請勿容納IE6。你只是在延續這個問題。給你的用戶一個消息告訴他們升級。 = d – Jason 2011-02-04 20:47:41

設置左值的子菜單項會的工作，默認爲自動。

left: 0;

來源

2011-02-04 21:03:07

只是改變在ie6中的submenu類帶走一些保證金。

類似：

if($.browser.msie && parseInt($.browser.version) == 6){ 
    $('.submenu').css('margin-left', '-50px'); 
}

應該幫助行起來。您可能需要使用像素數量才能將其完全放在您想要的位置。

here's a working example

來源

2011-02-04 20:44:11 heymrcarter

如果可以的話，還有一件事是安裝IE6的開發工具欄。我多年來遇到的一件事是定義其他div的寬度。雖然你不需要通常這樣做，但對於所有事情來說，IE6可以讓所有事情都達到100％，並且會破壞佈局。

只是一個想法。

來源

2011-02-04 21:07:30 TNC

菜單jquery的子項向右移

回答

相關問題