Плавное выпадающее меню

День добрый!
Помогите пожалуйста сделать плавное выпадающее меню на css3, с помощью transition (jquery не предлогать)
идет такая структура

<ul id="nav">
<li><a title="..." href="/">меню</a>
<ul>
<li><a title="..." href="/">подменю</a>
<ul>
<li><a title="..." href="/">подподменю</a></li>
<li><a title="..." href="/">подподменю</a></li>
<li><a title=".." href="/">подподменю</a></li>
</ul>
</li>
<ul>
</ul>

css

#nav, #nav ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
width: 100%;

}
#nav li {
position: relative;
background: none;
}
#nav li ul {
display: none;
position: absolute;
padding: 0px 0;
width: 80px;
font-size:10px;
}
#nav ul li ul {
display: none;
position: absolute;
padding: 0px 0;
width: 100px;
font-size:10px;
}
#nav a {
color: #fff;
text-decoration: none;
display: block;
padding: 4px 10px;

}
#nav a:hover {
color: #fff;
text-decoration: underline;
}
#nav li li a {
width: 250px;
}
#nav li ul a {
background-color:#0071ab;

}
#nav li:hover ul {
display: block;

}
#nav li:hover li ul {
display: none;
top: 0px;
left: 255px;
}
#nav li:hover li:hover ul {
display: block;
}

Кто поможет — обязательно отблагодарю в виде wmr

линк

а вот и пример

Спасибо большое! Отличное меню — как раз подошло.
Тут такая проблема нарисовалась — если меню слишком длинное — то оно попадает на блок новостей и при наведении на нижний пункт пропадет меню...z-index поставил 9999, толку нет.
дело в том что сайт сверстан divы + таблицы, блок новостей сверстан на таблицах… как лечить?

разобрался