منوی افقی باز شو

میخوام یک منو برای سایتم بزارم که افقی باشه و وقتی موس روی یه دکمش میره زیر منو هاش مشخص بشن
مثلا شبیه منوی بالایی همین سایت

میخوام بکگراند زیر منو با منوی اصلی هم فرق کنه باید چی کار کنم
راهنمائیم کنید

کد HTML:

---


<div  id="nav" >    <div id="line"></div>    <ul>    <li><a class="first"href="#">صفحه اصلی</a></li>    <li><a href="#">اخبار</a></li>    <li><a href="#">تبلیغات گوگل</a>    <ul>      <li><a  href="#" >مقالات</a></li>      <li><a  href="#" >آموزش</a></li>      <li><a  href="#" >تعرفه</a></li>    </ul><!--inner ul-->    </li>    <li><a href="#">تماس با ما</a></li>    </ul>  </div>

---

این چیزیه که من نوشتم ولی نمیتونم بکگراند زیر منو رو با منوی اصلی تغییر بدم هدو یک شکل میشن

کد:

---

#nav{
        position:relative;
        width:800px;
        height:100px;
        background-color:#3e3d3c;
       
       
}
#nav ul{
        list-style-type:none;
        margin-top:0px;
}
#nav ul li{
        float:right;
        position:relative;
        margin-top:-20px;
       
}
#nav ul li a{
        text-align:center;
        height:47px;
        width:120pt;
        display:block;
        text-decoration:none;
        color:#FFF;
        background-image:url(yellow/images/Untitled-1_05.png);
        background-repeat:no-repeat;
}
#nav ul li ul{
        display:none;
}
#nav ul li:hover ul{
        display:block;
        position:absolute;
}
#nav ul li:hover ul li a{
        display:block;
        color:#000;
        width:120pt;
        text-align:center;
        background-color:#000;


}
#nav ul li:hover ul li a:hover{
        display:block;
        color:#FFF;
        width:110px;
        background-repeat:no-repeat;
        text-align:center;


}

---

مرسی