25 قائمة رأسية بتأثيرات جميلة لمدونات بلوجر

بسم الله الرحمن الرحيم , السلام عليكم ورحمة الله وبركاته , بعد أن عرفنا كيفية اضافة قائمة أفقية الى بلوجر سنعرف اليوم كيفية اضافة قائمة رأسية , وكما تعرفون فان القائمة الرأسية مفيدة جدا , فقد تكون قائمة لتصنيفات المدونة , وقد تكون قائمة لروابط المواضيع المميزة الخ...
لإضافة القائمة الرأسية علينا أن نضيف كودين , الأول هو كود css ويهتم بمظهر القائمة وشكلها الخارجي والثاني هو كود HTML ويهتم بموضع القائمة , هل هي على اليمين أم اليسار وهكذا.
نبدأ الآن بالخطوات :
1- قم بالدخول الى لوحة التحكم في بلوجر ثم اضغط على قالب واضغط على "تحرير HTML"
2- قم بالضغط على Ctrl + F وابحث عن الكلمة : </b:skin>
3- قم بلصق كود CSS قبل\فوق الكود السابق للشكل المناسب لمدونتك
4- قم بالبحث عن الكود التالي اذا كان شريط الاضافات الجانبية في يمين مدونتك :
<div id='sidebar-wrapper'> أو <div id='sidebar-wrapper-right'>

وقم بالبحث عن الكود التالي إذا كان شريط الاضافات الجانبية في يسار مدونتك وهو الغالب :

<div id='sidebar-wrapper-left'>

5- قم بلصق كود HTML بعد\اسفل الكود السابق ذكره
6- يمكنك ايضا اضافة كود HTML باستخدام أداة HTML/JavaScript ووضعها في أي مكان تريد.

ملاحظة :
معظم المدونات تستعمل قوالب جاهزة وبعض هذه القوالب لا يوجد فيها الكود <div id='sidebar-wrapper-left'> كما هو بالضبط فماذا تفعل؟ لاتقلق , فقط ضع رابط مدونتط في التعليق اسفل التدوينة وأنا ساعطيك الكود الذي ستبحث عنه

للتعديل على الروابط :

<li><a href="#1" >Link 1</a></li> <li><a href="#2" >Link 2</a></li> <li><a href="#3" >Link 3</a></li> <li><a href="#4" >Link 4</a></li> <li><a href="#5" >Link5</a></li>

غير الملون باللون الأخضر الى نص الرابط والملون باللون الأحمر الى عنوان الرابط\URL.
لإضافة رابط إو ازالة رابط قم باضافة أو ازالة العبارة

<li><a href="#1" >Link 1</a></li>

نأتي الآن الى القوائم :

كود CSS :

 #menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6WqwbvfmDLMEIRJrH3QmpdTcjDXBkCJnCgvOXoQ6ta_6LECS72mY8vjbq2gg7R83OeSFD3hxqTshspa0YCJoPBZE_nRyabyj3GSDPyj76fboiOlHBKe8CQ8mH9By9-g2iNSI8NB3QPag/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6WqwbvfmDLMEIRJrH3QmpdTcjDXBkCJnCgvOXoQ6ta_6LECS72mY8vjbq2gg7R83OeSFD3hxqTshspa0YCJoPBZE_nRyabyj3GSDPyj76fboiOlHBKe8CQ8mH9By9-g2iNSI8NB3QPag/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; }

كود HTML :

 <div id="menu6">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS :

#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgems3CNNeqgK_MLhLcjmknKLusKBQFKaNKBGF882_Z2Y1C2m_Fl0J2CoSEvU-fYHSqD3t4WuAkB0JVFnn8-Dtiiy15JCiPQu846-QDGySnqbmq3MebDdeUhN4tBaGxcYvJa8NPEJNJoo0/s800/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgems3CNNeqgK_MLhLcjmknKLusKBQFKaNKBGF882_Z2Y1C2m_Fl0J2CoSEvU-fYHSqD3t4WuAkB0JVFnn8-Dtiiy15JCiPQu846-QDGySnqbmq3MebDdeUhN4tBaGxcYvJa8NPEJNJoo0/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }

كود HTML :

 <div id="menu3">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS :

#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhrrlBb0HzmX3AFsovvTJweRtarWinSNYTJAd0bt8YT5X8Vlwv5iK4MGZl_CCND1hI0QyvgpWUCC7m_u9_SeEDcodod21KtbtD-Y3wOwSwNxNn5z3R6IpMW8xrZnG4kVsI0wwJjUsBZxU/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhrrlBb0HzmX3AFsovvTJweRtarWinSNYTJAd0bt8YT5X8Vlwv5iK4MGZl_CCND1hI0QyvgpWUCC7m_u9_SeEDcodod21KtbtD-Y3wOwSwNxNn5z3R6IpMW8xrZnG4kVsI0wwJjUsBZxU/s800/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }

كود HTML :

 <div id="menu9">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS :

 #menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC6i6uGGl50GeSMk8HOIh7RXHHn9Xa748yIvsxY95xUHJk3pqIcdnTtsEWZv6W6w_d_qEn4kEoAMFIq0nZkLXBbBNlwRdJMxnY5wgslvlF4wBBUonRllC6C23MvBoI6J96n2trSw_wMe0/s800/menu6.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC6i6uGGl50GeSMk8HOIh7RXHHn9Xa748yIvsxY95xUHJk3pqIcdnTtsEWZv6W6w_d_qEn4kEoAMFIq0nZkLXBbBNlwRdJMxnY5wgslvlF4wBBUonRllC6C23MvBoI6J96n2trSw_wMe0/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }

كود HTML :

 <div id="menu6">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS :

 #menu14 ul { list-style: none; margin: 0; padding: 0; } #menu14 img { border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu14 li a:link, #menu14 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCWoUMfgbOV7lZsJBUvv9W4Fno6gTbur69feHJ3Y8MjRMTWUNLibDQBiBQRiCci0hyguQELqb-CqBcs3upM5_rKJh0W8p9WsR4Ad-IZE04cR1bAcY8tbT7bOfKd34rwpbg-y4fPedHHXU/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCWoUMfgbOV7lZsJBUvv9W4Fno6gTbur69feHJ3Y8MjRMTWUNLibDQBiBQRiCci0hyguQELqb-CqBcs3upM5_rKJh0W8p9WsR4Ad-IZE04cR1bAcY8tbT7bOfKd34rwpbg-y4fPedHHXU/s800/menu14.gif); padding: 8px 0 0 10px; }

كود HTML :

 <div id="menu14">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS :

 #menu7 ul { list-style: none; margin: 0; padding: 0; } #menu7 img { border: none; } #menu7 { width: 200px; margin: 10px; } #menu7 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu7 li a:link, #menu7 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioADuOVAebT641PjSj9m3rBOePvOsoODS04oX0XQnMxYYryMFN_WkVgSVNvkrfcCrZcThGh4frAhQN7zc2LwjRn7ajmUrcD9cMliV3RKgV9fUS9PwToozUiH_w3oKaXBpsMXEVYrhjwts/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioADuOVAebT641PjSj9m3rBOePvOsoODS04oX0XQnMxYYryMFN_WkVgSVNvkrfcCrZcThGh4frAhQN7zc2LwjRn7ajmUrcD9cMliV3RKgV9fUS9PwToozUiH_w3oKaXBpsMXEVYrhjwts/s800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; }

كود HTML :

 <div id="menu7">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS :

#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; border-style: solid solid none solid; border-color: #677D92; border-size: 1px; border-width: 1px; margin: 10px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9FLCBzyCys_5qesjJbHcTOfQmpEx7X6MThFDlpDNC7miq9g1sGrYNA2UdrDVP32m6YL47BsSAT9LD-LMOlfoi60wkzVpsqNjaWucHmPLAf1LTg9hY898Z0rhCkeCUWp00IHvK2XLmmRw/s800/menu2.gif); padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9FLCBzyCys_5qesjJbHcTOfQmpEx7X6MThFDlpDNC7miq9g1sGrYNA2UdrDVP32m6YL47BsSAT9LD-LMOlfoi60wkzVpsqNjaWucHmPLAf1LTg9hY898Z0rhCkeCUWp00IHvK2XLmmRw/s800/menu2.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9FLCBzyCys_5qesjJbHcTOfQmpEx7X6MThFDlpDNC7miq9g1sGrYNA2UdrDVP32m6YL47BsSAT9LD-LMOlfoi60wkzVpsqNjaWucHmPLAf1LTg9hY898Z0rhCkeCUWp00IHvK2XLmmRw/s800/menu2.gif) 0 -64px; padding: 8px 0 0 10px; }

كود HTML :

 <div id="menu2">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS:

 #menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjazzOxmL981YImKkGuiPt8R7nJ4F_1R8V_qa8H8EJXtvOw-pqB_ehR8ioIfudZFi1GNfqLO4jy-SI-0re6-QH6XzBbTrEsAbk2wgFYwRDWAKt8P_3PK4L5-Jq8KJZZHq1k9U2-D19wTY4/s800/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjazzOxmL981YImKkGuiPt8R7nJ4F_1R8V_qa8H8EJXtvOw-pqB_ehR8ioIfudZFi1GNfqLO4jy-SI-0re6-QH6XzBbTrEsAbk2wgFYwRDWAKt8P_3PK4L5-Jq8KJZZHq1k9U2-D19wTY4/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjazzOxmL981YImKkGuiPt8R7nJ4F_1R8V_qa8H8EJXtvOw-pqB_ehR8ioIfudZFi1GNfqLO4jy-SI-0re6-QH6XzBbTrEsAbk2wgFYwRDWAKt8P_3PK4L5-Jq8KJZZHq1k9U2-D19wTY4/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }

كود HTML :

 <div id="menu9">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS :

#menu12 ul { list-style: none; margin: 0; padding: 0; } #menu12 img { border: none; } #menu12 { width: 200px; margin: 10px; } #menu12 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu12 li a:link, #menu12 li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCgQyPeVybW2N9_B0AyJRG0kWFeWjznEBpKeCiyR3RneuqXdb4IM6GzPsfXpK1GszfjfKG015KKnXkr0F5Rpco723V_DVaMHCfJNzWgvjWGYuxlZ3EsO8PC9Rway-hLdqZyHSutHEIK7s/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCgQyPeVybW2N9_B0AyJRG0kWFeWjznEBpKeCiyR3RneuqXdb4IM6GzPsfXpK1GszfjfKG015KKnXkr0F5Rpco723V_DVaMHCfJNzWgvjWGYuxlZ3EsO8PC9Rway-hLdqZyHSutHEIK7s/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; }

كود HTML :

 <div id="menu12">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS :

 #menu13 ul { list-style: none; margin: 0; padding: 0; } #menu13 img { border: none; } #menu13 { width: 200px; margin: 10px; } #menu13 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu13 li a:link, #menu13 li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtbxJQ5sqgvyYBXjzdVD68qzj-IBmoE_0WabtmqLOo5PNS4miuoFn0uP2k3dpOuVWwiO2epPLaOzm8PPR1ukCUc6e4jGSdN3evF0da2t_Dwh_e-is6gm9E3c5nyOvbpLdMmx882KFpSOk/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtbxJQ5sqgvyYBXjzdVD68qzj-IBmoE_0WabtmqLOo5PNS4miuoFn0uP2k3dpOuVWwiO2epPLaOzm8PPR1ukCUc6e4jGSdN3evF0da2t_Dwh_e-is6gm9E3c5nyOvbpLdMmx882KFpSOk/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }

كود HTML :

 #menu13 ul { list-style: none; margin: 0; padding: 0; } #menu13 img { border: none; } #menu13 { width: 200px; margin: 10px; } #menu13 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu13 li a:link, #menu13 li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtbxJQ5sqgvyYBXjzdVD68qzj-IBmoE_0WabtmqLOo5PNS4miuoFn0uP2k3dpOuVWwiO2epPLaOzm8PPR1ukCUc6e4jGSdN3evF0da2t_Dwh_e-is6gm9E3c5nyOvbpLdMmx882KFpSOk/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtbxJQ5sqgvyYBXjzdVD68qzj-IBmoE_0WabtmqLOo5PNS4miuoFn0uP2k3dpOuVWwiO2epPLaOzm8PPR1ukCUc6e4jGSdN3evF0da2t_Dwh_e-is6gm9E3c5nyOvbpLdMmx882KFpSOk/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }

كود CSS :

 #menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; margin: 10px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtHErt1oAyqmrWarT1p02XvL95Tw8DUAIRm3gjb7w_f2-uV-RyN1VjmqJBQYGhQc8wLn6gzoU0xzvU7Kzl4305qNCp5BclUo4boHiL0VAsJgOvwRU_l6pJ7SZbxrH3azSp1_sNdWMfKvY/s800/menu4.gif); padding: 8px 0 0 30px; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtHErt1oAyqmrWarT1p02XvL95Tw8DUAIRm3gjb7w_f2-uV-RyN1VjmqJBQYGhQc8wLn6gzoU0xzvU7Kzl4305qNCp5BclUo4boHiL0VAsJgOvwRU_l6pJ7SZbxrH3azSp1_sNdWMfKvY/s800/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtHErt1oAyqmrWarT1p02XvL95Tw8DUAIRm3gjb7w_f2-uV-RyN1VjmqJBQYGhQc8wLn6gzoU0xzvU7Kzl4305qNCp5BclUo4boHiL0VAsJgOvwRU_l6pJ7SZbxrH3azSp1_sNdWMfKvY/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }

كود HTML :

 <div id="menu4">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS :

#navlist { color: white; background: #17a; border-bottom: 0.2em solid #17a; border-right: 0.2em solid #17a; padding: 0 1px; margin-left: 0; width: 12em; font: normal 10px Verdana, sans-serif; } #navlist li { list-style: none; margin: 0; font-size: 1em; } #navlist a { display: block; text-decoration: none; margin-bottom: 0.5em; margin-top: 0.5em; color: white; background: #39c; border-width: 1px; border-style: solid; border-color: #5bd #035 #068 #6cf; border-left: 1em solid #fc0; padding: 0.25em 0.5em 0.4em 0.75em; } #navlist a#current { border-color: #5bd #035 #068 #f30; } #navlist a { width: 99%; /* only necessary for Internet Explorer */ } #navlist a { voice-family: "\"}\""; voice-family: inherit; width: 9.6em; /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */ } #navcontainer>#navlist a { width: auto; /* only necessary if you use the hacks above for the Internet Explorer */ } #navlist a:hover, #navlist a#current:hover { background: #28b; border-color: #069 #6cf #5bd #fc0; padding: 0.4em 0.35em 0.25em 0.9em; } #navlist a:active, #navlist a#current:active { background: #17a; border-color: #069 #6cf #5bd white; padding: 0.4em 0.35em 0.25em 0.9em; }

كود HTML :

 <div id="navcontainer">
 <ul id="navlist">
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS :

 #menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin-top: 10px; } #menu8 li a { text-decoration: none; height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; } #menu8 li a:link, #menu8 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinGsZ_Y01jJpimGGoomflMOyuY_zW29fkuJuxuHIKdDVG6ZbDb1eIXv7PgnpAOmoWdEbnWXatZsODsuxV1PHnkGNgBQhIg1aP2p_xZy0c1xKCY8c6Z1YotiG0jNE5M-RWag4VfL4sT08s/s800/menu8.gif); padding: 8px 0 0 20px; } #menu8 li a:hover, #menu8 li #current { color: #257EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinGsZ_Y01jJpimGGoomflMOyuY_zW29fkuJuxuHIKdDVG6ZbDb1eIXv7PgnpAOmoWdEbnWXatZsODsuxV1PHnkGNgBQhIg1aP2p_xZy0c1xKCY8c6Z1YotiG0jNE5M-RWag4VfL4sT08s/s800/menu8.gif) 0 -32px; padding: 8px 0 0 25px; } #menu8 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinGsZ_Y01jJpimGGoomflMOyuY_zW29fkuJuxuHIKdDVG6ZbDb1eIXv7PgnpAOmoWdEbnWXatZsODsuxV1PHnkGNgBQhIg1aP2p_xZy0c1xKCY8c6Z1YotiG0jNE5M-RWag4VfL4sT08s/s800/menu8.gif) 0 -64px; padding: 8px 0 0 25px; }

كود HTML :

 <div id="menu8">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS :

#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu8 li a:link, #menu8 li a:visited { color: #656556 ; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6U-edSIhHNKw0V8hwjnEiDFgZwnJZfh-yIQZEomqsrFkPUcTEHTliABJW2b8oY3rexJ2eGs5PlDVOBtqbpPm_8yG32QLJMrC8EXDOU00xXTM8rXHS7I8yzSD-3MDm7tRd79xlBnoXjMI/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6U-edSIhHNKw0V8hwjnEiDFgZwnJZfh-yIQZEomqsrFkPUcTEHTliABJW2b8oY3rexJ2eGs5PlDVOBtqbpPm_8yG32QLJMrC8EXDOU00xXTM8rXHS7I8yzSD-3MDm7tRd79xlBnoXjMI/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }

كود HTML :

 <div id="menu8">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS :

#menu9 body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; } #menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #3D261D; border-size: 1px; border-width: 1px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #E4D6CD; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWCxao_CvKI8lnXDriKY0LgUEiAehL00Yom3SIuaJFTyDfe54N9D1lr2zsrH80MelMJtPi9lFnVuqXXh1HUFoOvTsFifHffP-2iTz3uER2b2yI0Cg4J_XfRg0_VimYfjzFqZHWPL5Rk1c/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWCxao_CvKI8lnXDriKY0LgUEiAehL00Yom3SIuaJFTyDfe54N9D1lr2zsrH80MelMJtPi9lFnVuqXXh1HUFoOvTsFifHffP-2iTz3uER2b2yI0Cg4J_XfRg0_VimYfjzFqZHWPL5Rk1c/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; }

كود HTML :

 <div id="menu1">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS :

#navcontainer { background: #f0e7d7; width: 30%; margin: 0 auto; padding: 1em 0; font-family: georgia, serif; font-size: 13px; text-align: center; text-transform: lowercase; } ul#navlist { text-align: left; list-style: none; padding: 0; margin: 0 auto; width: 70%; } ul#navlist li { display: block; margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em 0 0.5em 2em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; }

كود HTML :

 <div id="navcontainer">
 <ul id="navlist">
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS :

 #menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #8BADCF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRDV0S7zR000MGRguQz6KVT1o6eQKObEscYI458IlwOAFaNoeIWtLDex4Qx2Hl6Tvg9HUn3tozv6jxLwfMa9B7lAx_BrOW7329I1U5nRSC4Zxo_Idi44Cs02Me6JsSRYgIcKoOE_e4nmk/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRDV0S7zR000MGRguQz6KVT1o6eQKObEscYI458IlwOAFaNoeIWtLDex4Qx2Hl6Tvg9HUn3tozv6jxLwfMa9B7lAx_BrOW7329I1U5nRSC4Zxo_Idi44Cs02Me6JsSRYgIcKoOE_e4nmk/s800/menu3.gif) 0 -32px; padding: 8px 0 0 10px; }

كود HTML :

 <div id="menu3">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS :

#menu11 ul { list-style: none; margin: 0; padding: 0; } #menu11 img { border: none; } #menu11 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; } #menu11 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu11 li a:link, #menu11 li a:visited { color: #889944; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLlkYqNMMKQZZmvIv70shxnsDx54wX8IUXxLh3NIP8JKXIJGaWKC5MFGIF6bVscS-_hGglX-ymamoWIqeIBBV3wrb56NTWgnfpuPtCq07bccoav9go65ttm2iWO2WSL7FTgnlUbM5yV8I/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLlkYqNMMKQZZmvIv70shxnsDx54wX8IUXxLh3NIP8JKXIJGaWKC5MFGIF6bVscS-_hGglX-ymamoWIqeIBBV3wrb56NTWgnfpuPtCq07bccoav9go65ttm2iWO2WSL7FTgnlUbM5yV8I/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; }

كود HTML :

<div id="menu11">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS :

 #button { width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: Tahoma, Arial, sans-serif; /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/ font-size : 10px; background-color: #90bade; color: #333; } #button ul { list-style: none; margin: 0; padding: 0; border: none; } #button li { border-bottom: 1px solid #90bade; margin: 0; list-style: none; list-style-image: none; } #button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #button li a { width: auto; } #button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; } #button li #active { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }

كود HTML :

 <div id="button">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS :

#menu ul { list-style: none; margin: 0; padding: 0; } #menu img { border: none; } #menu { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #menu li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu li a:link, #menu li a:visited { color: #5E7830; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQh64istgXuYJRiajUtDBAoVUIjTbX-jbF4-xs50f8IbWwgf16cpWy__9ALCIhnG3prIW6zkj3egNAx_w9b1oRMLndGcTsVY79LQXyV-G4soGp0YqXKOUeo0KZ1q_Vo_PwDQvru9I-r0I/s800/menu1.gif); padding: 8px 0 0 10px; } #menu li a:hover, #menu li #current { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQh64istgXuYJRiajUtDBAoVUIjTbX-jbF4-xs50f8IbWwgf16cpWy__9ALCIhnG3prIW6zkj3egNAx_w9b1oRMLndGcTsVY79LQXyV-G4soGp0YqXKOUeo0KZ1q_Vo_PwDQvru9I-r0I/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; } #menu li a:active { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQh64istgXuYJRiajUtDBAoVUIjTbX-jbF4-xs50f8IbWwgf16cpWy__9ALCIhnG3prIW6zkj3egNAx_w9b1oRMLndGcTsVY79LQXyV-G4soGp0YqXKOUeo0KZ1q_Vo_PwDQvru9I-r0I/s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; }

كود HTML :

 <div id="menu">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS :

#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #3688BA; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj424WqoTc4Z9_HZobJMX6K2w8RD4prIpTuvRJlmx92n1KyH4v3N3TdDHWl7Oms2lkgetEf55KqQyIMHD8-9Mmmfy8CzA-6bNHOyZvACb6sGER1DrqqWfflQAdwoghGF82oUQ6ao2hN3qA/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj424WqoTc4Z9_HZobJMX6K2w8RD4prIpTuvRJlmx92n1KyH4v3N3TdDHWl7Oms2lkgetEf55KqQyIMHD8-9Mmmfy8CzA-6bNHOyZvACb6sGER1DrqqWfflQAdwoghGF82oUQ6ao2hN3qA/s800/menu2.gif) 0 -32px; padding: 8px 0 0 32px; }

كود HTML :

 <div id="menu2">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS :

#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9jPca9Mfvlh9Y7T52RIGccpsjiWEUtz3wSIKvUzVRPWtRGK3p1Fh_ktT4pSZ6O7EPIGxX8qR0R64IFjs8Nj0WJv4_BrKsnUlH8xtefL3NapjAY9-HdDIlrhO9w_zfvu9MxQh_R8FtTaA/s800/menu5.gif); padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:hover, #menu5 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9jPca9Mfvlh9Y7T52RIGccpsjiWEUtz3wSIKvUzVRPWtRGK3p1Fh_ktT4pSZ6O7EPIGxX8qR0R64IFjs8Nj0WJv4_BrKsnUlH8xtefL3NapjAY9-HdDIlrhO9w_zfvu9MxQh_R8FtTaA/s800/menu5.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9jPca9Mfvlh9Y7T52RIGccpsjiWEUtz3wSIKvUzVRPWtRGK3p1Fh_ktT4pSZ6O7EPIGxX8qR0R64IFjs8Nj0WJv4_BrKsnUlH8xtefL3NapjAY9-HdDIlrhO9w_zfvu9MxQh_R8FtTaA/s800/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; }

كود HTML :

 <div id="menu5">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS :

 #menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUV18Q3e0XlY70YQCxxl4xZ6UXinesv979CYrSs5vJgJ2nwhiyWLGSKAfrbXpNUBszIbzzyXDKcQrYnl2iRBsV4McQi8j0Vyb4H37SwXdt4h6JHu6htgFAg4ZRNZ8SbST2FuzM8qI8h6w/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUV18Q3e0XlY70YQCxxl4xZ6UXinesv979CYrSs5vJgJ2nwhiyWLGSKAfrbXpNUBszIbzzyXDKcQrYnl2iRBsV4McQi8j0Vyb4H37SwXdt4h6JHu6htgFAg4ZRNZ8SbST2FuzM8qI8h6w/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }

كود HTML :

 <div id="menu5">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS :

#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTuGINgc2Wf7-EdqWdOKRlGxVbtcwn80wTKgkBoHpq6MoF-jSwluJJCzrveXgU4r2G7hwQc27f7GiMAdFmX248DE6CCX-A8BdaJt7M60nDcUB9cegK3BTqxoHSH7C0n2wdW4N3Maeh6Mo/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTuGINgc2Wf7-EdqWdOKRlGxVbtcwn80wTKgkBoHpq6MoF-jSwluJJCzrveXgU4r2G7hwQc27f7GiMAdFmX248DE6CCX-A8BdaJt7M60nDcUB9cegK3BTqxoHSH7C0n2wdW4N3Maeh6Mo/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }

كود HTML :

 <div id="menu4">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

كود CSS :

 #menu10 ul { list-style: none; margin: 0; padding: 0; } #menu10 img { border: none; } #menu10 { width: 200px; margin: 10px; } #menu10 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu10 li a:link, #menu10 li a:visited { color: #4D4D4D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFgs0l5MPlOvuTf_BrslykHsJTIjgUk5biIadwk4gSTbogIpqQR1m8DpBzliz-3Ut68mpwD2wbH4PsxBgjccXxLITSShW5gSZrL4gEFZrZyYC90d_DXzLDHOFUQtQOIVdgNMHr1mHfSqs/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFgs0l5MPlOvuTf_BrslykHsJTIjgUk5biIadwk4gSTbogIpqQR1m8DpBzliz-3Ut68mpwD2wbH4PsxBgjccXxLITSShW5gSZrL4gEFZrZyYC90d_DXzLDHOFUQtQOIVdgNMHr1mHfSqs/s800/menu10.gif) 0 -32px; padding: 8px 0 0 10px; }

كود HTML :

 <div id="menu10">
 <ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

وإلى هنا أكون قد انتهيت من الموضوع أرجو أن يكون ممتع ومفيد , لا تنسى أنه يمكنك مشاركة رابط الموضوع مع اصدقائك لتعم الفائدة من خلال الضغظ على ازرار مواقع التواصل الاجتماعي في اسفل التدوينة والسلام عليكم ورحمة الله وبركاته يمكنك تحميل شريط المدونة الذي يوفر لكم خصائص كثيرة بالضغط على الصورة ادناه