я бы сделал так
<!DOCTYPE html>
<style type = "text/css">
*{
margin:0px;
padding:0px;
font-family:helvetica, arial, sans-serif;
font-size:14px;
}
.menu, .menu ul{
color:#fff;
list-style-type: none;
}
.menu > li{
position:relative;
width: 100px;
display: inline-block;
margin-right:-4px;
cursor: pointer;
}
.menu > li > div{
line-height: 30px;
padding:0px 10px;
background-color: red;
background-color: #5af;
border-bottom: 3px solid white;
}
.menu > li > ul > li{
width: 80px;
padding:0px 10px;
cursor: pointer;
line-height: 30px;
border-bottom: 1px solid white;
}
.menu > li > ul{
position:absolute;
top:33px;
left:0px;
height:0px;
overflow:hidden;
background-color: transparent;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
opacity: 0;
}
.menu > li:hover ul{
height: 155px;
opacity: 1;
background-color: #5af;
}
.menu > li:hover >div{
background-color: #05a;
}
</style>
<ul class = "menu">
<li><div>item1 ▼</div>
<ul>
<li>sub0</li>
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
<li>sub4</li>
</ul>
</li>
<li><div>item2 ▼</div>
<ul>
<li>sub0</li>
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
<li>sub4</li>
</ul>
</li>
<li><div>item3 ▼</div>
<ul>
<li>sub0</li>
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
<li>sub4</li>
</ul>
</li>
</ul>
привет!
а там где не работает еще transition просто не будет анимации, я не думаю что эти штуки критичны в дизайне, Обычно наоборот отвлекают, так что не стал бы сходить с ума от всех этих лишних скриптов. И посмотрите как это просто. Во всех новых браузерах уже работает transition, кроме ie
PS я тут в стилях накуралесил наспех, кучу всего объединить можно и будет совсем просто
