Перемещение непрозрачности CSS не работает на селекторе sibling при наведении на элемент

Question

Я создал отзывчивое меню, в котором элементы списка элементов после четвертого получают display:none; opacity:0 на мобильном телефоне. Четвертый элемент - это другой элемент списка, который является значком. При наведении курсора на иконку скрытые пункты меню отображаются в виде списка блоков ниже, используя

li:nth-child(4):hover ~ li { display:block; opacity:1; }

где бы то ни я придерживаюсь transition: all 0.5s ease в моем CSS я не могу получить переход идет. Я пытаюсь сделать что-то, что просто не сработает, потому что я действую на селекторе, или я делаю что-то неправильно?

См. Скрипку: https://jsfiddle.net/nicoleamurray/zap1L8hq/, которая отображает мобильную версию.

ОБНОВЛЕНИЕ: У него действительно хорошо работает height!

`.mainmenu{ 
float: right; 
text-align: right; 
} 
.mainmenu li{ 
display:inline-block; 
} 
.mainmenu li:nth-child(4):hover ~ li{ 
opacity:1; 
transition-delay: 0s; 
height: 20px; 
} 
.mainmenu li:nth-child(n+5){ 
opacity:0; 
overflow: hidden; 
height: 0; 
display: block; 
transition: all 0.5s 1s; 
}` 

Answer 1

Вы можете не Переходный display: свойство. Это либо видно, либо скрыто. Нет никаких «промежуточных» вариантов перехода к/из.

Если оба состояния установлены на display: block;, то функции перехода. inline-block также работает .. но может означать, что требуется еще одна макета. Для ниже фрагмент кода, я просто использовал block;

body { margin: 50px;} 
 

 
.mainmenu{ 
 
    float: right; 
 
    text-align: right; 
 
} 
 
.mainmenu li{ 
 
    display:inline-block; 
 
} 
 
.mainmenu li:nth-child(4):hover ~ li{ 
 
    display:block; 
 
    opacity:1; 
 
} 
 

 
.mainmenu li:nth-child(n+5){ 
 
    display:block; 
 
    opacity:0; 
 
    transition: all 0.5s ease; 
 
}

<ul class="mainmenu" role="menubar"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Features</a></li> 
 
    <li><a href="#">Pages</a></li> 
 
    <li class="mainmenu__icon">:</li> 
 
    <li><a href="#">Events</a></li> 
 
    <li><a href="#">Shortcodes</a></li> 
 
    <li><a href="#">Demo</a></li> 
 
</ul>