قائمة افقية رووووووعة جدا
قائمة افقية رووعة جدا

ذات اقسام منسدلة

ومظهر رائع مقدمة من مدونه نيوز هادى

صورة القائمة



طريقة التركيب

الدخول الى المدونة ثم تصميم ثم اضافة أداة

HTML/JavaScript

ونضع هذا الكود

كود:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="CSS3 Menu_files/css3menu1/style.css" type="text/css" />

</head>
<body style="background-color:#EBEBEB">
<ul id="css3menu1" class="topmenu">
    <li class="topmenu"><a class="pressed" href="#" title="نيوز هادى" style="height:16px;line-height:16px;">المنتدى</a></li>
    <li class="topmenu"><a href="#" title="نيوز هادى" style="height:16px;line-height:16px;">بلوجر بالعربي</a></li>
    <li class="topmenu"><a href="#" title="نيوز هادى" style="height:16px;line-height:16px;"><span>بلوجر بالعربي</span></a>
    <ul>
        <li class="subfirst"><a href="#" title="Item 1 0">Item 1 0</a></li>
        <li><a href="#" title="Item 1 1">Item 1 1</a></li>
        <li class="sublast"><a href="#" title="Item 1 2">Item 1 2</a></li>
    </ul>

    </li>
    <li class="topmenu"><a href="#" title="نيوز هادى" style="height:16px;line-height:16px;">بلوجر بالعربي</a></li>
    <li class="topmenu"><a href="#" title="نيوز هادى" style="height:16px;line-height:16px;">بلوجر بالعربي</a></li>
    <li class="topmenu"><a href="#" title="نيوز هادى" style="height:16px;line-height:16px;">بلوجر بالعربي</a></li>
</ul>


<p style="display:none"><a href="http://css3menu.com/">Make CSS Menu Css3Menu.com</a></p>
</body>
</html>
ثم ندخل الى تحرير HTML

ثم نضع علامة صح بجوار مربع توسيع قوالب عناصر واجهة

المستخدم ثم ctrl + f

ونبحث عن كلمة ]]></b:skin>

ونضع قبلها هذا الكود

كود:
ul#css3menu1,ul#css3menu1 ul{
    margin:0;list-style:none;background-color:#000000;background-image:url("mainbk.png");background-repeat:repeat;border-width:1px;border-style:solid;border-color:#B4B4B4;-moz-border-radius:28px;-webkit-border-radius:28px;border-radius:28px;}
ul#css3menu1 ul{
    display:none;position:absolute;right:0;top:100%;padding:0;background-color:#dddddd;background-image:url("subbk.png");border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}
ul#css3menu1 li:hover>*{
    display:block;}
ul#css3menu1 li:hover{
    position:relative;}
ul#css3menu1 ul ul{
    position:absolute;right:100%;top:0;}
ul#css3menu1{
    padding:6px 6px 6px 0;display:block;font-size:0;float:right;}
ul#css3menu1 li{
    display:block;white-space:nowrap;font-size:0;float:right;}
ul#css3menu1>li,ul#css3menu1 li{
    margin:0 0 0 6px;}
ul#css3menu1 ul>li{
    margin:6px 0 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 Arial;color:#666666;cursor:pointer;}
ul#css3menu1 ul li{
    float:none;margin:0;}
ul#css3menu1 ul a{
    text-align:right;}
ul#css3menu1 li:hover>a{
    background-color:#ffaa00;border-color:#F8F8F8;border-style:solid;font:bold 14px Arial;color:#ffffff;text-decoration:none;}
ul#css3menu1 img{
    border:none;vertical-align:middle;margin-right:8px;}
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 a{
    padding:8px 20px;background-color:;background-repeat:repeat;border-width:0;border-style:solid;border-color:transparent;color:#666666;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
    background-color:#ffaa00;border-style:solid;border-color:#F8F8F8;color:#ffffff;text-decoration:none;}
ul#css3menu1 li.topmenu>a{
    height:16px;background-color:;background-image:none;background-position:0 0;border-width:1px 0 0 0;border-style:solid;border-color:transparent;border-radius:16px;-moz-border-radius:16px;-webkit-border-radius:16px;font:bold 20px Arial;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px #000000;line-height:16px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu>a.pressed{
    background-color:#f77b00;background-image:url("mainbk.png");background-position:0 100%;border-style:solid;border-color:#F8F8F8;font:bold 20px Arial;color:#444444;text-decoration:none;text-shadow:0 1px 0 #FFFFFF;line-height:16px;}
ul#css3menu1 li.subfirst>a{
    border-radius:9px 9px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu1 li.sublast>a{
    border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:9px;-webkit-border-bottom-right-radius:9px;}