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

[mohsen.nsb44]

یه نمونه که تو سایت ارتمیس انجام دادم رو برات گذاشتم بر اساس میلت رنگشو تغییر بده

    <div align="center" class="menu">

    

        <div  style="width: 100%">

    

          

                            <div class="menu">

                            



  <li><a href="default.aspx">صفحه اصلی</a></li>

    <li><a href="news.aspx">اخبار و اطلاعیه</a></li>

    <li><a href="sale.aspx">تصاویر</a></li>

کد css

.menu {    



    height: 40px;



   



    direction:rtl;



    background: #4c4e5a;



    background: -webkit-linear-gradient(top, #D8E3F6 0%,#2c4c10 100%);



    background: -moz-linear-gradient(top, #D8E3F6 0%,#2c4c10 100%);



    background: -o-linear-gradient(top, #D8E3F6 0%,#2c4c10 100%);



    background: -ms-linear-gradient(top, #D8E3F6 0%,#2c4c10 100%);



    background: linear-gradient(top,#D8E3F6 0%,#2c4d10 100%);







    -webkit-border-radius: 5px;



    -moz-border-radius: 5px;



    border-radius: 5px;



}



.menu li {



    position: relative;



    list-style: none;



    float: right;



    display: block;



    height: 40px;

   



}



.menu li a {



    display: block;



    padding: 0 14px;



    margin: 6px 0;



    line-height: 28px;



    text-decoration: none;







    border-left: 1px solid #393942;



    border-right: 1px solid #4f5058;







    font-family: Tahoma, Arial, sans-serif;



    font-weight: normal;



    font-size: 12px;







    color: #f3f3f3;



    text-shadow: 1px 1px 1px rgba(0,0,0,.6);







    -webkit-transition: color .2s ease-in-out;



    -moz-transition: color .2s ease-in-out;



    -o-transition: color .2s ease-in-out;



    -ms-transition: color .2s ease-in-out;



    transition: color .2s ease-in-out;



}







.menu li:first-child a { border-left: none; }



.menu li:last-child a{ border-right: none; }







.menu li:hover > a { color: yellow; }



  .menu ul {



    position: absolute;



    top: 40px;



    right: 0;



    opacity: 0;



    background: #1f2024;



    -webkit-border-radius: 0 0 5px 5px;



    -moz-border-radius: 0 0 5px 5px;



    border-radius: 0 0 5px 5px;



    -webkit-transition: opacity .25s ease .1s;



    -moz-transition: opacity .25s ease .1s;



    -o-transition: opacity .25s ease .1s;



    -ms-transition: opacity .25s ease .1s;



    transition: opacity .25s ease .1s;



}







.menu li:hover > ul { opacity: 1; }







.menu ul li {



    height: 0;



    overflow: hidden;



    padding: 0;



    -webkit-transition: height .25s ease .1s;



    -moz-transition: height .25s ease .1s;



    -o-transition: height .25s ease .1s;



    -ms-transition: height .25s ease .1s;



    transition: height .25s ease .1s;



}







.menu li:hover > ul li {



    height: 36px;



    overflow: visible;



    padding: 0;



    direction:rtl;



}





 .menu ul li a {



    width: 100px;



    padding: 4px 30px 4px 0;



    margin: 0;



    border: none;



    border-bottom: 1px solid #353539;



}







.menu ul li:last-child a { border: none; }