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

应该帮助排队。您可能需要使用像素数才能将其精确到达所需的位置。

here's a working example

Answer 2

将左侧值设置为子菜单项将起作用，默认为自动。

left: 0;

Answer 3

如果可以，还可以尝试安装IE6的开发人员工具栏。多年来我经常遇到的一件事是定义其他div的宽度。虽然你不必正常地做，但对于一切，IE6使一切都100％，并将打破布局。

只是一个想法。

菜单Jquery子项目向右移动

3 个答案: