كود لعرض المواقع الاجتماعية لمتابعة منتداك عليها

كما عودناكم من مجموعة اكواد 2012

كود لعرض المواقع الاجتماعية لمتابعة منتداك عليها

صورة للكود

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
التركيب يكون في الامكان التالية
في اسفل قالب
overall_header
او اعلى قالب
viewtopic_body

الكود:

<div class="drop-menu_dark">
<div class="drop_down_title">CSS3 Menu Dark</div>
<ul class="sub-menu_dark">

<li>
<a href="#"><img src="icons/indent/rss.png" align="absmiddle"/>
<span class="rss">RSS</span></a>
</li>

<li>
<a href="#"><img src="icons/indent/twitter.png" align="absmiddle"/>
<span class="twitter">twitter</span></a>
</li>

<li><a href="#"><img src="icons/indent/facebook.png" align="absmiddle"/>
<span class="facebook">Facebook</span></a></li>

<li><a href="#"><img src="icons/indent/dribbble.png" align="absmiddle"/>
<span class="dribble">dribble</span></a></li>

<li><a href="#"><img src="icons/indent/last_fm.png" align="absmiddle"/>
<span class="lastfm">LastFM</span></a>
</li>

<li id="final">
<a href="#"><img src="icons/indent/flickr.png" align="absmiddle"/>
<span class="flickr_blue">flick</span><span class="flickr_pink">r</span></a>
</li> 
   
</ul>
</div>


ونضع التالي في ورقة css

الكود:

.drop-menu_dark {
      display: block;
      margin-right: auto;
      margin-left: auto;
      text-align: left;
      padding: 10px 10px;
      font-size: 22px;
      height: 25px;
      max-height: 25px;
      width: 200px;
      cursor: pointer;
      background-color: #424242;
      -moz-border-radius-topright: 10px;
      border-top-right-radius: 10px;
      -moz-border-radius-topleft: 10px;
      border-top-left-radius: 10px;
      -moz-border-radius-bottomright: 10px;
      border-bottom-right-radius: 10px;
      -moz-border-radius-bottomleft: 10px;
      border-bottom-left-radius: 10px;
      -webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
      -moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
      box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
    }

    .drop-menu_dark:hover {
      background-color: #424242;
      -moz-border-radius-bottomright: 0px;
      border-bottom-right-radius: 0px;
      -moz-border-radius-bottomleft: 0px;
      border-bottom-left-radius: 0px;
      -webkit-box-shadow: 0px 0px 0px rgba(0,0,0, 0.0);
      -moz-box-shadow: 0px 0px 0px rgba(0,0,0, 0.0);
      box-shadow: 0px 0px 0px rgba(0,0,0, 0.0);
    }
   
    .drop-menu_dark:hover .sub-menu_dark {
      display: inline-block;
      border-top-color: #151515;
      border-top-width: 1px;
      border-top-style: solid;
    }
       
    .sub-menu_dark {
      display: none;
      width: 220px;
      background: #424242;
      padding: 0px;
      margin-left: -10px;
      margin-top: 8px;
      -webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
      -moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
      box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
      margin-right: 0px;
      margin-bottom: 0px;
      -moz-border-radius-bottomright: 10px;
      border-bottom-right-radius: 10px;
      -moz-border-radius-bottomleft: 10px;
      border-bottom-left-radius: 10px;
    }
   
    .sub-menu_dark li {
      list-style-type: none;
      display: block;
      height: 32px;
      border-bottom-color: #151515;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      color: #C0C0C0;
      width: 180px;
      padding-top: 8px;
      padding-right: 20px;
      padding-bottom: 8px;
      padding-left: 20px;
      margin: 0px;
      float: left;
      box-shadow:inset 0;
      -moz-box-shadow:inset 0;
    }

    .sub-menu_dark li a {
      font-size: 16px;
      display: block;
      line-height: 26px;
      text-shadow: 0px 0px 5px #000;
      text-decoration: none;
    }

    .drop-menu_dark .sub-menu_dark li a img {
      border-top-style: none;
      border-right-style: none;
      border-bottom-style: none;
      border-left-style: none;
      padding-right: 15px;
      height: 32px;
      width: 32px;
    }

    .sub-menu_dark li:hover {
      border-bottom-color: #151515;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      color: #FFF;
      background-color: #2D2D2D;
      box-shadow:inset 0 0 4px #2D2D2D;
      -moz-box-shadow:inset 0 0 4px #2D2D2D;
    }

    .sub-menu_dark #final {
      background-color: #424242;
      -moz-border-radius-bottomright: 10px;
      border-bottom-right-radius: 10px;
      -moz-border-radius-bottomleft: 10px;
      border-bottom-left-radius: 10px;
      height: 32px;
      float: left;
    }
   
    .sub-menu_dark #final:hover {
      -moz-border-radius-bottomright: 10px;
      border-bottom-right-radius: 10px;
      -moz-border-radius-bottomleft: 10px;
      border-bottom-left-radius: 10px;
      color: #FFF;
      background-color: #2D2D2D;
      box-shadow:inset 0 0 4px #2D2D2D;
      -moz-box-shadow:inset 0 0 4px #2D2D2D;
      border-top-style: none;
      border-right-style: none;
      border-bottom-style: none;
      border-left-style: none;
    }


:lol!: