Невозможно изменить стиль div с зависанием на другом div

Question

Код кажется правильным, но просто не работает.

HTML этого

<div class="logo5"> 
    <a class="underlogolink" id="expandlogonav" href="whatever.com" > 
     <div class="underlogotext alcenter">{{settings.underlogotext}}</div> 
    </a> 
</div> 
<div class="logo6" id="underlogonav"> 
    <ul> 
     <li>Test 1</li> 
     <li>Test 2</li> 
     <li>Test 3</li> 
     <li>Test 4</li> 
     <li>Test 5</li> 
    </ul> 
</div> 

и CSS

#underlogonav { 
    height:0px; 
    overflow-y:hidden; 
    -webkit-transition:0.5s; 
    -moz-transition:0.5s; 
    -ms-transition:0.5s; 
    -o-transition:0.5s; 
    transition:0.5s; 
} 
#expandlogonav:hover ~ #underlogonav { 
    height:auto; 
} 

Не могли бы вы указать мне, где я пошло не так.

Answer 1

#underlogonav не является родственным братом #expandlogonav.

У вас должен быть селектор, который фактически соответствует элементу.

Вместо этого вы можете навестить div, содержащий #expandlogonav.

NB: Если вы исправите это, переход все равно не будет работать, потому что вы не можете перейти на auto высоты.