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

Question

<分区>

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。