jquery - 子项向右移动的菜单 Jquery

标签 jquery css menu

这是我的菜单,我的 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);
        });
    }
);

最佳答案

为子菜单项设置左值即可,默认为自动。

left: 0;

关于jquery - 子项向右移动的菜单 Jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4902609/

相关文章:

css - Bootstrap CSS 过渡悬停

javascript - 使用 JS 切换/显示一个定义的 DIV

html - 在 IE7 上使用内联 block 的不同行高

javascript - Bootstrap 导航栏在调整大小时隐藏菜单元素

css - Foundation 顶部栏中的按钮样式?

html - 菜单项隐藏在数据列表后面

WPF菜单打开方向

javascript - 如何使文本按钮自动调整

javascript - 试图从 sweetalert 获取值(value)

javascript - 展开下拉菜单 onkeyup 事件