Анимировать снизу экрана?

Question

My .filter-list скрыт от экрана, я хочу использовать это при наведении (идеально анимированный), используя только CSS.

При наведении указателя мыши появляется меню, изменяющее нижнее свойство, проблема в том, как я могу получить .filter-list для анимации и сидеть точно над родительским литером, не используя 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

Легче всего было бы, чтобы установить дисплей: ни для фильтра-лист затем обратно на дисплей: встроенный блок на парении. Я скорректировал позиционирование для его соответствия, но вы можете изменить его далее для работы с вашим сайтом.

Есть популярные css libs, у которых есть элементы управления раскрытием, такие как 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; 
}