Question

我的.filter-list隐藏在屏幕外，我希望只使用CSS将其悬停（理想的动画）。

在悬停时我通过更改底部属性来显示菜单，问题是，如何让.filter-list动画并正好位于它的父li之上，而不使用JS来获取它的高度并更改最低价值？

HTML：

<ul>
    <li class="small-2 columns filter-category">
        Category
        <ul class="filter-list">
            <li>element one</li>
            <li>element two</li>
            <li>element three</li>
        </ul>
    </li>
</ul>

CSS：

.filter-category{

    &:hover ul{

        bottom: 100px;
    }

}

.filter-list{

    position: absolute;
    bottom: -99999px;
    background: white;
    width: 100%;
    margin: 0;

}

Answer 1

更简单的方法是将filter：none设置为filter-list然后返回显示：onover-block on hover。我已调整定位以使其适当适合，但您可能需要进一步修改以适合您的网站。

有流行的css库有下拉控件，如bootstrap，如果可以，请尝试一下。

.filter-list {
    background: white;
    width: 100%;
    margin: 0;
    visibility:hidden;
}
.filter-category {
    position:relative;
}

ul:hover ul {
    visibility:visible;
}

.filter-list-holder {
    list-style:none;
}

<ul>
    <li class='filter-list-holder'>
        <ul class="filter-list">
            <li>element one</li>
            <li>element two</li>
            <li>element three</li>
        </ul>
    </li>
    <li class="small-2 columns filter-category">Category</li>
</ul>

Answer 2

这里是demo

.filter-category {
   position: relative;
   overflow: hidden;
   height: 20px; //set the list height, so the child can be place on top of it
}
.filter-list {
   position: absolute;
   bottom: -60px; // hide it just below the parent so the animation is short & nice
   background: white;
   width: 200px; // i change it to prevent overflow-x on the body
   margin: 0;
   left: 0;
}
.filter-category:hover {
   overflow: visible;
}
.filter-category:hover ul.filter-list {
   bottom: 20px;
   -webkit-transition: .5s ease;
   -moz-transition: 5s ease;
   -o-transition: .5s ease;
   transition: .5s ease;
}

从屏幕底部动画？

2 个答案: