Menu Jquery with subitems shifted to the right

Question

This is my menu and I have a problem with ie6, infact this is a drop down menu and the subitems menus are shifted to the right in ie6, making the menu useless...

here 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> 

This is the 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;*/
}

This the 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

just change take away some margin on the submenu class in ie6.

something like:

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

should help line it up. you may have to play with the number of pixels to get it exactly where you want it.

here's a working example

Answer 2

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

left: 0;

Answer 3

One thing to try too, if you can, is install the developer toolbar for IE6. One thing I've run into a lot over the years is defining the widths of other divs. While you don't have to do it normally, for everything, IE6 makes everything 100% and will break layouts.

Just a thought.