اضافة قائمه منزلقه بتاثير جميل | حلمي حلمكم

اضافة قائمه منزلقه بتاثير جميل

قائمه منزلقه مميزه بالوان هادئه

اضفت لها خلفيه خاصه.

معاينة

الاضافه عبر اداة الجافاسكريبت

الكود

<style type="text/css">
 
ul#css3menu1,ul#css3menu1 ul{
width:auto;margin:0px;list-style:none;padding:0px;background-image:-moz-linear-gradient(top, #000000, #999999);border-width:1px;border-style:solid;border-color:#ff9900;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu1 ul{
display:none;float:center;right:5px;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;padding-right:10px;padding-bottom:10px;background-color:#000000;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;}
ul#css3menu1 li:hover>*{
    display:block;}
ul#css3menu1 li:hover{
   position:relative;}
ul#css3menu1 ul ul{
    float:center;left:100%;top:0;}
ul#css3menu1{
    display:block;font-size:0;margin-right:5px;float:right;}
ul#css3menu1 li{
    display:block;white-space:nowrap;font-size:0;float:right;padding-right:0px;}
ul#css3menu1>li,ul#css3menu1 li{
    margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
    outline-style:none;}
ul#css3menu1 a,ul#css3menu1 a.pressed{
    display:block;vertical-align:middle;text-align:right;text-decoration:none;font:bold 14px Tahoma;color:#ffffff;text-color:#ffffff;cursor:pointer;}
ul#css3menu1 ul li{
    float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
    text-align:center;padding:4px;background-color:none;background-image:none;border-width:0px;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 14px Tahoma;color:#ffffff;text-decoration:none;}
ul#css3menu1 li:hover>a{
background-color:#999999;border-color:#000000;border-style:solid;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;font:bold 14px Tahoma;color:#ff9900;text-decoration:none;text-color:#FFFFFF;background-position:0 100px;}
ul#css3menu1 img{
    border:none;vertical-align:middle;margin-right:3px;}
ul#css3menu1 img.over{
    display:none;}
ul#css3menu1 li:hover > a img.def{
    display:none;}
ul#css3menu1 li:hover > a img.over{
    display:inline;}
ul#css3menu1 li a.pressed img.over{
    display:inline;}
ul#css3menu1 li a.pressed img.def{
    display:none;}
ul#css3menu1 span{
    display:block;overflow:visible;background-position:center;padding-right:10px;}
ul#css3menu1 a{
    padding:10px;background-image:-moz-linear-gradient(top, #000000, #999999);
        background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#000000;text-decoration:none;text-color:#FFFFFF;}
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
    background-image:-moz-linear-gradient(top, #000000, #999999);background-position:center;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;border-style:solid;border-color:#000000;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{
    background-color:none;background-image:none;font:14px Tahoma;color:#ffffff;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
    border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;}
ul#css3menu1 li.toplast>a{
    border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;}
 
</style>

<ul id="css3menu1" class="topmenu">
<li class="topfirst"><a href="#" style="height:50px;line-height:50px;"><img src="http://3.bp.blogspot.com/-6Qd3wbaJmBo/TxBKon81C0I/AAAAAAAANAU/TywpML74P3s/s1600/home_48.png"width="30" height="30"/>الرئيسيه</a></li>
<li><a href="#" style="height:50px;line-height:50px;"><span><img src="http://1.bp.blogspot.com/-8R8zZCN-Nhs/TxBL0b1AzbI/AAAAAAAANAc/Y3h-e5KqTKs/s1600/cd_48.png" width="30" height="30"/>برامج</span></a>
<ul>
<li><a href="#">برامج 1</a></li>
<li><a href="#">برامج 2</a></li>
<li><a href="#">برامج 3</a></li>
</ul>
</li>
<li class="toplast"><a href="#" style="height:50px;line-height:50px;"><img src="http://4.bp.blogspot.com/-dSf_RefFI9s/TxBl1zmDbZI/AAAAAAAANBk/Q-a-bBlpfqE/s1600/1326474660_video.png"width="30" height="30"/>فيديو</a></li>
<li><a href="#" style="height:50px;line-height:50px;"><span><img src="http://2.bp.blogspot.com/-PJzkBpSD8Gc/TxBj-ihpKyI/AAAAAAAANBc/sl5W_IDfAPw/s1600/1326474182_java.png"width="40" height="40"/>جافا</span></a>
<ul>
<li><a href="#">جافا 1</a></li>
<li><a href="#">جافا 2</a></li>
<li><a href="#">جافا 3</a></li>
</ul>
</li>
<li class="toplast"><a href="#"style="height:50px;line-height:50px;"><img src="http://2.bp.blogspot.com/-fpcZA7VoryM/Tx7vFvE7oTI/AAAAAAAANIw/QETAEkEq_Hk/s1600/contact.png"/>اتصل بنا</a></li>
</ul>

الى اللقاء .....ابو هشام