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

[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%;
}


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

[azamicu]

سلام دوست عزیز
شما باید داخل هر li هم یدونه ul , li بسازی و بهشون استایلتو بدی
توی همین بخشم نمونه زیاد هستش اگه بگردید

[thinkdiff]

خوب می دونم که باید تو هر Li یک ul ,li بذارم ولی استایلش رو نمیدونم چطوری بدم