jQuery动画菜单下拉列表，占据容器的整个宽度

Question

我正在尝试编辑以下jQuery动画菜单，以便子文本div的宽度为绝对600px，而不是相对于父菜单列表项的宽度。

Click here for the code

我尝试将绝对位置添加到子文本类，但它不起作用。

当我将“关于”菜单项悬停时，这就是我想要的。

非常感谢您的帮助。

Answer 1

• Demo using jQuery animation
• Demo using CSS transitions（未在IE9及更早版本中制作动画）

以下是一些最重要的风格：

ul {
    list-style: none;     /* Get rid of bullets on li tags */
    position: relative;   /* Use relative position here, but not on li tags */
}
li {
    /* position: relative; */   /* Remove this style, to make all dropdown
                                   divs appear at the same location */
}
a {
    outline: none;   /* Get rid of outline on links */
}
.subtext {
    overflow: hidden;
    height: 0;
    position: absolute;
    z-index: 1;
}
li:hover .subtext {
    z-index: 2;   /* Make sure the active menu dropdown is on top */
}
/* Apply background color to both the li tags and the dropdown divs */
.green,  .green  .subtext { background-color: #6AA63B; }
.yellow, .yellow .subtext { background-color: #FBC700; }
.red,    .red    .subtext { background-color: #D52100; }
.purple, .purple .subtext { background-color: #5122B4; }
.blue,   .blue   .subtext { background-color: #0292C0; }

具有CSS过渡的版本添加了以下样式：

.subtext {
    -webkit-transition: height 0.6s;
       -moz-transition: height 0.6s;
            transition: height 0.6s;
}
li:hover .subtext {
    height: 200px;
}

两个演示都使用相同的HTML，并且大多数使用相同的CSS。这两个版本都不需要编辑现有的HTML。具有CSS转换的版本不需要jQuery。

Answer 2

以下是实现此目的的方法：

从li中删除position: relative;，将display: none;和height:0;添加到.subtext

然后修改javascript代码：

//When mouse rolls over
$("li").mouseenter(function(){
    $('.subtext').hide(); // remove this for a fancier effect
    $(this).find('.subtext').css({backgroundColor: $(this).css('backgroundColor')})
    $(this).find('.subtext').stop().animate({height:'250px'},{queue:false, duration:600, easing: ''}).show()
});

//When mouse is removed
$("li").mouseleave(function(){
    $(this).find('.subtext').stop().animate({height:'0px'},{queue:false, duration:600, easing: ''}, function() {$(this).find('.subtext').hide()})
});

JsFiddle Demo