菜單Jquery的子項向右移動

Question

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

此處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);
        });
    }
);

Answer 1

只需更改即可在ie6中的submenu類上消除一些空白。

就像是：

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

應該幫助排隊。 您可能需要處理像素數才能將其准確地放置在所需位置。

這是一個有效的例子

Answer 2

為子菜單項設置一個左值將起作用，默認值為自動。

left: 0;

Answer 3

也可以嘗試的一件事是安裝IE6的開發人員工具欄。 多年來，我遇到的一件事就是定義其他div的寬度。 盡管您不必正常執行所有操作，但IE6可以使所有內容100％生成，並且會破壞布局。

只是一個想法。