Простое выпадающее меню - переход по наведению

Question

У меня есть простое выпадающее меню с подменю Я хотел бы скользить вниз, а не «выскочить» при наведении курсора со свойством перехода:

JSFiddle

.navbar ul > li { 
 
    list-style-type: none; 
 
} 
 

 
.navbar ul ul { 
 
    display: none; 
 
} 
 

 
.navbar ul li:hover > ul { 
 
    display: block; 
 

 
    -webkit-transition:height 200ms ease-in; 
 
    -moz-transition:height 200ms ease-in; 
 
    -o-transition:height 200ms ease-in; 
 
    transition:height 200ms ease-in; 
 
}

<div class="navbar"> 
 
    <ul> 
 
     <li> 
 
      <a href="#">Network</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">About us</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Membership</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Members</a> 
 
      <ul> 
 
       <li><a href="medlemmer.html">What's up?</a></li> 
 
       <li><a href="#">Guests</a></li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">Contact (connecting us)</a> 
 
     </li> 
 
    </ul> 
 
</div>

Проблема в том, что я абсолютно не знаю, где разместить свойства перехода и чего не хватает, чтобы заставить его работать должным образом.

Answer 1

Самый простой способ, которым Вы могли бы сделать это только с помощью CSS - с помощью max-height:

JSFiddle

.navbar ul > li { 
 
    list-style-type: none; 
 
} 
 

 
.navbar ul ul { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    
 
    -webkit-transition: max-height 0.2s ease-in; 
 
    transition: max-height 0.2s ease-in; 
 
} 
 

 
.navbar ul li:hover > ul { 
 
    max-height: 100px; 
 
}

<div class="navbar"> 
 
    <ul> 
 
     <li> 
 
      <a href="#">Network</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">About us</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Membership</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Members</a> 
 
      <ul> 
 
       <li><a href="medlemmer.html">What's up?</a></li> 
 
       <li><a href="#">Guests</a></li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">Contact (connecting us)</a> 
 
     </li> 
 
    </ul> 
 
</div>