قائمة منسدلة بسيطة لمدونتك بتقنية ال jQuery

بسم الله الرحمان الرحيم

و الأن طريقة إضافة القائمة

</head>

<!--start drop menu أسرار التدوين--><style type='text/css'>/* menu styles */#jsddm{ margin: 0;padding: 0;}
#jsddm li{ float: left;list-style: none;font: 12px Tahoma, Arial}
#jsddm li a{ display: block;background: #0033CC; /*لون خلفية القائمة الغير المنسدلة*/
-moz-border-radius: 6px;-webkit-border-radius: 6px;
padding: 5px 12px;text-decoration: none;border-right: 1px solid white;width: 70px;color: #EAFFED; /*لون العناوين*/
white-space: nowrap}
#jsddm li a:hover{ background: #24313C /*لون خلفية القائمة المنسدلة*/; -moz-border-radius: 6px;-webkit-border-radius: 6px;}
#jsddm li ul{ margin: 0;padding: 0;position: absolute;z-index:100;visibility: hidden;border-top: 1px solid white}
#jsddm li ul li{ float: none;display: inline}
#jsddm li ul li a{ width: auto;background: #BFCFFE; /*لون خلفية الروابط التي تظهر (تنسدل)*/
color: #24313C /*لون الروابط التي تنسدل أسفل العناوين*/
}
#jsddm li ul li a:hover{ background: #809FFE /* لون خلفية القائمة المنسدلة الثانية*/}</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/><script type='text/javascript'>var timeout = 500;var closetimer = 0;var ddmenuitem = 0;
function jsddm_open(){ jsddm_canceltimer();jsddm_close();ddmenuitem = $(this).find(&#39;ul&#39;).eq(0).css(&#39;visibility&#39;, &#39;visible&#39;);}
function jsddm_close(){ if(ddmenuitem) ddmenuitem.css(&#39;visibility&#39;, &#39;hidden&#39;);}
function jsddm_timer(){ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer(){ if(closetimer){ window.clearTimeout(closetimer);closetimer = null;}}
$(document).ready(function(){ $(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseover&#39;, jsddm_open);$(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseout&#39;, jsddm_timer);});
document.onclick = jsddm_close;</script><!--end menu code أسرار التدوين--> 

يرجي منك زيارة موضوع أواد الhtml لتختار لونك المفضل و ضعه في الCSS  من هنا 

<ul id="jsddm"><li><a href="/">الرئيسية</a><li><a href="#">العنوان الأول</a>
<ul>
<li><a href="#">الرابط المنسدل 1</a></li>
<li><a href="#">الرابط المنسدل 2</a></li>
<li><a href="#">الرابط المنسدل 3</a></li>
</ul>
</li>
<li><a href="#"> العنوان الثاني</a>
<ul>
<li><a href="#">الرابط المنسدل 1</a></li>
<li><a href="#">الرابط المنسدل 2</a></li>
<li><a href="#">الرابط المنسدل 3</a></li>
<li><a href="#">الرابط المنسدل 4</a></li>
<li><a href="#">الرابط المنسدل 5</a></li>
</ul>
</li>
<li><a href="#">العنوان الثالث</a></li>
<li><a href="#">العنوان الرابع</a></li> 

<li><a href="#">العنوان الخامس</a></li></li></ul>