Как сделать для эффект для выпадающего меню CSS3?

Question

[Антон Волк]

Добрый день.
Сверстано выпадающее меню на CSS, но хотелось бы , что бы при разворачивании был эффект плавного разворачивания.
Возможно ли такое реализовать без js?

Answer 1

[Машка]

Возможно с применение transition. Первый уровень сверстается без проблем, со вторым придется поколдовать.

<ul>
    <li><a href="#">Телефоны</a>
		<ul>
		  <li><a href="#">Nokia</a></li>
		  <li><a href="#">Samsung</a></li>
		  <li><a href="#">Вятка-автомат</a></li>	
		</ul>	
	</li>
    <li><a href="#">Аксессуары</a></li>
    <li><a href="#">Рингтоны</a></li>
  </ul>
  </div>

#menu{
 width: 800px;
 height: 200px;
 margin: auto;
 background: #f0f0f0;
}
#menu ul{
 list-style: none;
 padding: 0;
 margin: 0;
}
#menu li {
  float: left;
  position:relative
}
#menu li a{
 height: 50px;
 padding: 0 20px;
 background: #69c;
 color: #fff;
 float: left; 
 line-height: 50px;
 text-decoration:none;
 text-transform:uppercase;
 font-family: serif
 
}
#menu li a:hover{
background: #9af;
}

#menu li ul{
position:absolute;
top:100%;
height:0;
overflow:hidden;
transition: all .5s;
}
#menu li li{
	float:none
}
#menu li li a{
	background-color:#f63;
	float:none;
	display:block;
	white-space:nowrap
}
#menu li li a:hover{
	background-color:#f96
}

#menu li:hover ul {
height:300%; transition: all 0.5s;transform:rotate(360deg)}