تبدیل منوی ساده به منوی آبشاری

[thinkdiff]

دوستان من یک منوی ساده ساده با html , css با استفاده از تگ های ul ,li ساختم که اینم عکسش هست.http://upload7.ir/images/35782863530958420400.jpg
حالا میخوام به یکی از این گزینه ها 3تا گزینه زیر مجموعه اضافه کنم که به صورت آبشاری باز بشه.
میدونم داخل اون تک li مورد نزرم دوباره بایدul ,li تعریف کنم و به اون استایل بدم ولی نمیدونم چطور باید استایل بدم که زیر هم باشن و وقتی هوور میشن نمایان شن.کد هاش هم به صورت زیر هست.توجه داشته باشید که این li های جدیدی که تعریف میکنیم از استایل های li های قبلی ارثبری می کنن و باید با کلاس دهی از هم جداشون کنید.

کد های html:

<div id="nav">
<ul class="nav">
<li><a href="index.php">صفحه اصلی</a></li>
<li><a href="http://127.0.0.1/#content">اخبار سایت</a></li>
<li> <a href="http://127.0.0.1/?page_id=35">ثالث و بدنه</a> </li>
<li><a href="http://127.0.0.1/?page_id=38">سفارش بیمه</a></li>
<li><a href="http://127.0.0.1/?page_id=31">درباره ما</a></li>
<li><a href="#">تماس با ما</a></li>
</ul>
</div>

css:

#nav {
widows:100%;
height:40px;
background:url(image/menu.png);
text-align:right;
direction:rtl;
}
ul.nav li a {
color:#fefefe;
float: right;
margin: 8px auto;
text-align: center;
width: 16%;
}

ul.nav li a:hover {
color:#FF6600;
float: right;
margin: 8px auto;
text-align: center;
width: 16%;
}


لطفاراهنمایی

[Omid Jackson]

این (http://jsfiddle.net/OmidJackson/2XrKD/) یه نمونه کار برا اینکه متوجه بشیم
از جی کوئری استفاده کنین برا انیمیشن

[2undercover]

فقط یک نکته توی انیمیشن های jQuery هست که اگه شما توی مثال بالا سریع ماوس رو روی آیتم ها ببرید و بعد ماوس رو کنار بیارید و چند بار این کار تکرار کنید می بینید که زیر منو سریع باز بسته میشه. برای جلوگیری از این کار باید از متد stop در jQuery استفاده کنید: مثال ویرایش شده (http://jsfiddle.net/2XrKD/3/)