#top-menu {
    background: url("http://elsa3a.com/templates/elsa3a/image/top-hed-bg.png") repeat-x scroll center bottom #212121;
    height: 49px;
    line-height: 49px;
    min-width: 970px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000;
}
#top-menu .top-menu-cont {
    width:970px;
    margin: 0 auto;
}
#top-menu .top-menu-cont ul{
}
#top-menu .top-menu-cont ul li{
    float:right;
    position: relative;
    margin-left: 22px;
}
#top-menu .top-menu-cont ul li span{
    color:#fff;
}
#top-menu .top-menu-cont ul li span:hover{
    color:#3aa1e2;
}
#top-menu .top-menu-cont ul li img{
    vertical-align: middle;
}
#top-menu .top-menu-cont ul li a{
    color:#fff;
    display: block;
    text-decoration:none;
}
#top-menu .top-menu-cont ul li a:hover{
    color:#3aa1e2;
}
#top-menu .top-menu-cont ul li > ul{
    background: #212121;
    position: absolute;
    border-radius: 5px;
    right: 0;
    width: 120px;
    visibility: hidden;
    top:40px;
    transition: all 200ms;
    z-index: 1;
    opacity: 0;
}
#top-menu .top-menu-cont ul li:hover > ul{
    visibility: visible;
    top:49px;
    opacity: 1;
}
#top-menu .top-menu-cont ul li > ul li{
    width: 120px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    transition: all 500ms;
}
#top-menu .top-menu-cont ul li > ul li:hover{
}
#top-menu .top-menu-cont ul li > ul li a{
    display: inline-block;
    color:#fff;
    text-decoration:none;
}
#top-menu .top-menu-cont .social{
    float:left;
    margin-top: 10px;
    margin-left:10px;
}
#top-menu .top-menu-cont .social a{
    display: block;
    width: 26px;
    height: 26px;
    float:left;
    margin-right: 8px;
    transition: all 800ms ease;
    -moz-transition: all 800ms ease;
    -webkit-transition: all 800ms ease;
    -o-transition: all 800ms ease;
    text-decoration: none;
}
#top-menu .top-menu-cont .social .face{
    background: url(https://i93.servimg.com/u/f93/15/47/21/99/social10.png) no-repeat;
}
#top-menu .top-menu-cont .social .face:hover{
    background: url(https://i93.servimg.com/u/f93/15/47/21/99/social10.png) no-repeat 0 -28px;
}
#top-menu .top-menu-cont .social .twitter{
    background: url(https://i93.servimg.com/u/f93/15/47/21/99/social10.png) no-repeat -35px 0;
}
#top-menu .top-menu-cont .social .twitter:hover{
    background: url(https://i93.servimg.com/u/f93/15/47/21/99/social10.png) no-repeat -35px -28px;
}
#top-menu .top-menu-cont .social .youtube{
    background: url(https://i93.servimg.com/u/f93/15/47/21/99/social10.png) no-repeat -71px 0;
}
#top-menu .top-menu-cont .social .youtube:hover{
    background: url(https://i93.servimg.com/u/f93/15/47/21/99/social10.png) no-repeat -71px -28px;
}
.contaner {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 5px;
    margin: 0 auto;
    position: relative;
    top: 47px;
    width: 970px;
    padding-bottom:  64px;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
}
.header-contaner{
    background: url("https://i93.servimg.com/u/f93/15/47/21/99/bg10.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    margin: 0 auto;
    position: relative;
    top: 47px;
    width: 970px;
}
.effect8
{
    position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
}
.effect8:before, .effect8:after
{
    content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 7px rgba(0, 0, 0, 0.45);
    -moz-box-shadow:0 0 7px rgba(0, 0, 0, 0.45);
    box-shadow:0 0 7px rgba(0, 0, 0, 0.45);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
} 
.effect8:after
{
    right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
    -moz-transform:skew(8deg) rotate(3deg);     
    -ms-transform:skew(8deg) rotate(3deg);     
    -o-transform:skew(8deg) rotate(3deg); 
    transform:skew(8deg) rotate(3deg);
}
.header-contaner #header{
    height: 185px;
    overflow: hidden;
}
.header-contaner #header #logo{
    background: url("https://i93.servimg.com/u/f93/15/47/21/99/bg-log11.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    float: right;
    height: 185px;
    margin-right: -22px;
    text-align: center;
    width: 456px;
}
.header-contaner #header #logo img{
    margin-top: 38px;
}
.header-contaner #header #live{
    background: url(https://i93.servimg.com/u/f93/15/47/21/99/bg-liv10.png) no-repeat;
    width:456px;
    height:185px;
    float:left;
    text-align: center;
}
.header-contaner #header #live #colive{
    margin: 26px auto 0;
    width: 223px;
height:119px;
}
.header-contaner #header #live #colive h1{
    float: left;
    font-family: gess;
    font-size: 20px;
    font-weight: bold;
    margin-top: 41px;
}
.header-contaner #header #live #colive a{
    float: left;
    font-family: gess;
    font-size: 20px;
    font-weight: bold;
    margin-left: 26px;
    margin-top: -39px;
    text-decoration:none;
}
.header-contaner #header #live #colive .online{
    color:#8fbe07;
}
.header-contaner #header #live #colive .offline{
    color: #BD4216;
    margin-left: 10px;
}

  
<div id="top-menu">
            <div class="top-menu-cont">
                <ul>
                    <li><a href="http://inkor.yoo7.com" title="الرئيسية"><img src="https://i93.servimg.com/u/f93/15/47/21/99/home10.png" alt="المنتدى" title="المنتدى"></a></li>
                    <li><span>اقسام انكور</span>
                        <ul>
                            <li><a href="#" title="اعلانات واشعارات">اعلانات و اشعارات</a></li>
                            <li><a href="#" title="مسابقات انكور">مسابقات انكور</a></li>
                        </ul>
                    </li>
                    <li><span>قائمة مسندلة 2</span>
                        <ul>
                            <li><a href="#" title="رابط نصي">رابط نصي</a></li>
                            <li><a href="#" title="رابط نصي">رابط نصي</a></li>
                            <li><a href="#" title="رابط نصي">رابط نصي</a></li>
                        </ul>
                    </li>
                    <li><span>قائمة مسندلة 3</span>
                        <ul>
                            <li><a href="design.php" title="رابط نصي">رابط نصي</a></li>
                            <li><a href="t-design.php" title="رابط نصي">رابط نصي</a></li>
                            <li><a href="script.php" title="رابط نصي">رابط نصي</a></li>
                            <li><a href="logo.php" title="رابط نصي">رابط نصي</a></li>
                        </ul>
                    </li>
                    <li><span>قائمة مسندلة 4</span>
                        <ul>
                            <li><a href="#" title="رابط نصي">رابط نصي</a></li>
                            <li><a href="#" title="رابط نصي">رابط نصي</a></li>
                            <li><a href="#" title="رابط نصي">رابط نصي</a></li>
                            <li><a href="#" title="رابط نصي">رابط نصي</a></li>
                        </ul>
                    </li>
                    <li><a href="#" title="رابط نصي">رابط نصي</a></li>
                    <li><span> قائمة مسندلة 5</span>
                        <ul>
                            <li><a href="#" title="رابط نصي">رابط نصي</a></li>
                            <li><a href="#" title="رابط نصي">رابط نصي</a></li>
                        </ul>   
                    </li>
                    <li><a href="/contact" title="إتصل بنا">إتصل بنا</a></li>
                </ul>
                <div class="social">
                    <a class="face" href="https://www.facebook.com/" title="facebook"></a>
                    <a class="twitter" href="https://twitter.com/" title="twitter"></a>
                    <a class="youtube" href="#" title="rss"></a>
                </div>
            </div>
        </div>