الاستضافة الاسلامية

body {
    background:#E5F0FF none repeat scroll 0 0;
    color:#595959;
    font-family: Traditional Arabic, Arial;
text-align: right;
    font-weight: bold;
    font-size: 14px;
}
ul, li{
    padding: 0px;
    margin: 0px;
}
ul.dropmenu{
    position: relative;
    margin: 0px;
    padding: 1px 0px 0px 0px;
    background:transparent url(images/navigation.png) repeat-x scroll 0 0;
    display:block;
    height: 35px;
    font-family: Traditional Arabic, Arial;
text-align: center;
    font-weight: bold;
    font-size: 14px;
}
.dropmenu li{
    position: relative;
    list-style: none;
    float: right;
    margin: 0px;
    padding: 0px;
}
.dropmenu li a{
    height: 22px;
    padding: 9px 30px 0px 15px;
    display: block;
    cursor: point;
    border-right: solid 1px #4a779d;
    color: #FFFFFF;
    text-transform: uppercase;
    text-decoration: none;
}
.dropmenu li span{
    display: block;
    float: left;
    height: 10px;
    width: 10px;
    background:transparent url(images/arrow_up.png) repeat-x scroll 0 0;
    position: absolute;
    top: 12px;
    right: 10px;
}
.dropmenu li  a:hover span{
    background:transparent url(images/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu li:hover ul, .dropmenu li:hover div{
    display: block;
}
.dropmenu ul{
    position: absolute;
    display: none;
    width: 140px;
    padding: 0px;
    margin: 0px;
    border-bottom: 1px solid #ccc;
    background: #FFFFFF url(images/gradient.png) repeat-x scroll 0 0;
}
.dropmenu ul li{
    border: 0;
    float: none;
}
.dropmenu ul a {
  border: 1px solid #ccc;
  border-bottom: 0;
  white-space: nowrap;
  display:block;
  color: #0657AD;
  text-decoration: underline;
  text-transform: none;
}
a.selected, a:hover{
    color: #0657AD !important;
    background: #FFFFFF url(images/gradient.png) repeat-x scroll 0 0;
}
a.selected span{
    background:transparent url(images/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu ul a:hover {
    color:#F67A00 !important;
    text-decoration: none;
    background-color: #F0F0F0;
    background-image: none;
}
.dropmenu div ul{
    position: relative;
    display: block;
}
.dropmenu li div{
    background: #FFFFFF url(images/gradient.png) repeat-x scroll 0 0;
    border: 1px solid #ccc;
    padding: 5px;
    display: none;
    position: absolute;
}
.dropmenu li div ul{
    border: none;
    background: none;
    position: relative !important;
}
.dropmenu li div a{
    border: none;
    border-bottom: 1px solid #ccc;
}
.dropmenu li div div{
    display: block;
    position: relative;
    background: none;
    border: none;
}
.dropmenu li div div a{
    display: inline;
    border: none;
    color: #666;
    text-decoration: underline;
    padding: 0px;
    margin: 0px;
    text-transform: none;
}
.dropmenu li div div a:hover{
    color: #000;
    text-decoration: none;
}
ul.left{
    float: left;
    width: 145px;
}
ul.right{
    float: right;
    width: 145px;
}
.small{
    color: #666;
    font-size: 10px;
    padding: 10px 5px 8px 5px !important;
    display: block;
    clear: both;
    font-family: Traditional Arabic, Arial;

    font-weight: bold;
    font-size: 13px;
}
.products{
    width: 300px;
    padding: 15px !important;
}
.products ul{
    width: 100%;
}
.products ul li{
    border-bottom: 1px solid #ccc;
    height: 40px;
    padding: 10px 0px;
}
.products h2{
    font-size: 16px;
    padding: 2px 0px 3px 0px;
    margin: 0px;
}
.products p{
font-family: Traditional Arabic, Arial;

    font-weight: bold;
   
    color: #666;
    font-size: 13px;
    padding: 0px;
    margin: 0px;
}
.products img{
    float: right;
    padding-right: 10px;
}
.products  ul li a{
    display: inline;
    border: none;
    color: #666;
    text-decoration: underline;
    padding: 0px;
    margin: 0px;
    text-transform: none;
}
.products  ul li  a:hover{
    color: #000 !important;
    text-decoration: none;
    background: none !important;
}

.tutorials{
    width: 300px;
}

.login{
    padding: 15px !important;
    width: 180px;
    font-family: Traditional Arabic, Arial;
text-align: right;
    font-weight: bold;
    font-size: 14px;
}
input{
    border:1px solid #4A779D;
    padding: 3px 8px;
    margin-bottom: 8px;
    width: 164px;
}
label{
    padding: 0px 0px 4px 0px;
    display:block;
}
button{
    background: #4A779D url(images/navigation.png) repeat-x scroll 0 0;
    color: #FFF;
    border:1px solid #4A779D;
    padding: 4px 10px;
    width: 180px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"><head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>القوائم الافقية بشكل جميل</title>
<meta name="description" content="Computer tips, tricks en tutorials voor de gevorderde computer gebruikers." />
<meta name="keywords" content="computerfaq, leren, handleidingen, programmeren, php, webdevlopment, scripting, handleidingen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dropmenu.js"></script>
<script>
$(document).ready(function(){
    $("#nav-one").dropmenu();
});
</script>
<link rel="stylesheet" id="smthemenewprint-css"  href="style.css" type="text/css" />
</head>

<body>
<ul id="nav-one" class="dropmenu">
            <li>
                <a href="#">الرئيسية</a>
            </li>
            <li>
                <a href="#">المنتديات</a>
                <ul>
                    <li><a href="#">الدعم الفني</a></li>
                    <li><a href="#">المساعدة</a></li>
                    <li><a href="#">صفحة تجريبية</a></li>
                    <li><a href="#">صفحة تجريبية</a></li>
                </ul>
            </li>
            <li>
                <a href="#item3">التحميل</a>
                <ul>
                    <li><a href="#">برامج كمبيوتر</a></li>
                    <li><a href="#">كتب و راجع</a></li>
                    <li><a href="#">مشاريع جاهزة</a></li>
                </ul>
            </li> 
            <li>
                <a href="#">المنتجــات</a>
                <div class="products">
                    <ul>
                        <li><img src="images/236872.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>تجربة تجربة</h2><p><a href="#">كلام يكتب هنا</a></p></li>
                        <li><img src="images/242702.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>تجربة تجربة</h2><p><a href="#">كلام يكتب هنا</a></p></li>
                        <li><img src="images/242177.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>تجربة تجربة</h2><p><a href="#">كلام يكتب هنا</a></p></li>
                        <li><img src="images/226138.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>تجربة تجربة</h2><p><a href="#">كلام يكتب هنا</a></p></li>
                        <li><img src="images/216794.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>تجربة تجربة</h2><p><a href="#">كلام يكتب هنا</a></p></li>
                        <li><img src="images/211826.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>تجربة تجربة</h2><p><a href="#">كلام يكتب هنا</a></p></li>
                        <li><img src="images/203708.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>تجربة تجربة</h2><p><a href="#">كلام يكتب هنا</a></p></li>
                    </ul>
                    <div class="small">وصف يكتب هنا وصف يكتب هنا وصف يكتب هنا.</div>
                </div>
            </li>
            <li>
                <a href="#">أدوات الهاكر الأخلاقي</a>
                <div class="tutorials">
                    <ul class="left">
                        <li><a href="#">الميتاسبلووت</a></li>
                        <li><a href="#">برنامج Nikto</a></li>
                        <li><a href="#">برامج فحص السرفرات</a></li>
                    </ul>
                    <ul class="right">
                        <li><a href="#">برامج الهندسة العكسية</a></li>
                        <li><a href="#">الهندسة العكسية</a></li>
                        <li><a href="#">برامج الحقن</a></li>
                    </ul>
                    <div class="small">مشاهدة <a href="#">جميع الأقسام</a> او <a href="#">اختر ما يناسبك من القائمة</a>.</div>
                </div>
            </li>
            <li>
                <a href="#">روابط</a>
                <ul>
                    <li><a href="#">برمجة و تصميم</a></li>
                    <li><a href="#">أمن معلومات</a></li>
                    <li><a href="#">الويب 2.0</a></li>
                    <li><a href="#">الدعم الفني</a></li>
                    <li><a href="#">تجربة تجربة</a></li>
                    <li><a href="#">قواعد البيانات</a></li>
                    <li><a href="#">تجربة تجربة</a></li>
                </ul>
            </li>
            <li>
                <a href="#">تسجيل الدخول</a>
                <div class="login" dir="rtl">
                    <label for="txtuser">اسم المستخدم: </label>
                    <input type="text" name="txtuser" id="txtuser" />
                    <label for="txtuser">كلمة المرور: </label>
                    <input type="password" name="txtpass" id="txtpass" />
                    <button>دخول</button>
                </div>
            </li>             
        </ul>
</html>