Меню 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

Будет работать установка левого значения для элемента подменю, по умолчанию установлено значение auto.

left: 0;

Answer 2

Одна вещь, которую можно попробовать, если вы можете, это установить панель инструментов разработчика для IE6. Одна вещь, с которой я столкнулся за многие годы, это определение ширины других элементов. Хотя вам не нужно делать это как обычно, IE6 делает все на 100% и ломает макеты.

Просто мысль.

Answer 3

просто измените, уберите маржу в классе submenu в ie6.

что-то вроде:

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

должно помочь выстроить это. возможно, вам придется поиграть с количеством пикселей, чтобы получить его именно там, где вы хотите.

вот рабочий пример