قائمة باللون الأزرق

هوم بلوجر

by homeblogger7

HTML

<ul class='HBmenu'>
<li class='current'><a href='ضع هنا رابط التوجيه'><b>الرئيسية</b></a></li>
<li><a href='ضع هنا رابط التوجيه'><b>من نحن</b></a></li>
<li><a href='ضع هنا رابط التوجيه'><b>سياستنا</b></a></li>
<li><a href='ضع هنا رابط التوجيه'><b>الدعم الفني</b></a></li>
<li><a href='ضع هنا رابط التوجيه'><b>اتصل بنا</b></a></li> 
<li><a href='ضع هنا رابط التوجيه'><b>الأشيف</b></a></li> 
</ul>

CSS

/*Credits: By Home Blogger (http://homeblog7.blogspot.com) */ 
/*Modified : IB  (http://www.homeblog7.blogspot.com/) */ 
.HBmenu{ 
    position: relative; 
    padding:0 34px 0 0; 
    margin:0 auto 0 auto; 
    background: url(http://cdn.top4top.co/p_8uy351.png) repeat-x; /*tab background image path*/ 
    height: 46px; 
    list-style: none; 
} 
.HBmenu li{ 
    float:right; 
} 
.HBmenu li a{ 
    float: right; 
    display: block; 
    color:#000; 
    text-decoration: none; 
    font-family: sans-serif; 
    font-size: 13px; 
    font-weight: bold; 
    padding:0 16px 0 0; /*Padding to accomodate right tab image. Do not change*/ 
    height: 46px; 
    line-height: 46px; 
    text-align: center; 
    cursor: pointer;    
} 
.HBmenu li a b{ 
    float: right; 
    display: block; 
    padding:0 8px 0 24px; /*Padding of menu items*/ 
} 
.HBmenu li.current a, .HBmenu li a:hover{ 
    color: #fff; 
    background:  no-repeat; /*right tab image path*/ 
    background-position: right; 
} 
.HBmenu li.current a b, .HBmenu li a:hover b{ 
    color: #fff; 
    background: url(http://cdn.top4top.co/p_89jje1.png) no-repeat left top; /*left tab image path*/ 
}