الشارقة لدروس و إضافات بلوجر: مايو 2012

بسم الله الرحمن الرحيم
كثير من المدونين يرغب في تركيب قائمه عموديه في مدونته وبعضهم لا يعرف الطريقه والبعض الاخر قد
لا يجد قائمه تلبي احتياجاته من حيث الشكل
لذلك في درسنا اليوم سنستعرض 26 قائمه عموديه تستطيع وضع روابطك المهمه فيها
قم بتطبيق مايلي حتى يتم التركيب بشكل سليم

قم بالذهاب الي لوحة تحكم مدونتك Blogger > ثم الي تصميم > ثم الي تحرير HTML
قم باخذ نسخه احتياطيه من قالب مدونتك

يجب ان تعلم اولا ان القائمه سيتم تركيبها علي مرحلتين الاولي وهي اضافة كود css

3. انسخ كود CSS ويجب وضعه قبل هذا الكود ]]></b:skin>
4. المرحلة الثانيه من تركيب القائمه العموديه هي وضع كود html تحت هذا الكود

<div id='sidebar-wrapper'> او هذا <div id='sidebar-wrapper-right'>
واذا كان عندك عامود جانبي في الجانب الايسر قم بوضع الكود تحت هذا <div id='sidebar-wrapper-left'>

ملحوظه:-عند حدوث اي تعارض اثناء التطبيق فمعنى هذا ان قالبك تم التعديل عليه من قبلك او من قبل احد غيرك بشكل كبير

طريقة التعديل علي كود html

ما بالاسفل هو مثال علي كود ال html

<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>

قم بتغيير تلك الرموز #1, #2, #3 الروابط التي تريدها في القائمه ثم قم بتغيير تلك الكلمات Link1, Link2, Link3 ا لي اى مسمى تريده للرابط الذي ستقوم بوضعه في القائمه

الان ناتي لاشكال القوائم العموديه وتحت كل قائمه كود ال css الخاص بها وكذلك كود ال html ويجب وضعهم كما بالشرح

قائمه رقم 1

CSS CODE:

 #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/AVvXsEh_oYtQX0e1k5M3TrxivDdzbTCOny40qU8F6-8cwZTIF0IlfeULMuyYwNFR3xi6A1MnnAvgKDBw5goiFcde6LzPYOvfT0pR_VlJ-HnAB4Boy0y-LJzoOePnlq6MXnpe0XcNhFX5AP7XOKU/s800/menu6.gif);    padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background:      url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_oYtQX0e1k5M3TrxivDdzbTCOny40qU8F6-8cwZTIF0IlfeULMuyYwNFR3xi6A1MnnAvgKDBw5goiFcde6LzPYOvfT0pR_VlJ-HnAB4Boy0y-LJzoOePnlq6MXnpe0XcNhFX5AP7XOKU/s800/menu6.gif)    0 -32px; padding: 8px 0 0 20px; }

HTML CODE:

 <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>

قائمه رقم 2

CSS Code:

#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/AVvXsEizo4vBxt9CUf0bIiYJxNf8oWgBmUqUdMPTcGip_ndKBKWIyA2wyTApSBFsLUxERgLPSG3z5h-1AU__QgcDOU-xf1Ngt9sutYHiLO0su2eET6aIGW0vTptO8tjw03lUl7k5ol7tOJBOBhU/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/AVvXsEizo4vBxt9CUf0bIiYJxNf8oWgBmUqUdMPTcGip_ndKBKWIyA2wyTApSBFsLUxERgLPSG3z5h-1AU__QgcDOU-xf1Ngt9sutYHiLO0su2eET6aIGW0vTptO8tjw03lUl7k5ol7tOJBOBhU/s800/menu3.gif)    0 -32px; padding: 8px 0 0 30px; }

HTML Code:

 <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>

قائمه رقم3

CSS Code:

#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/AVvXsEhFdfnRbE78EdgwggCPIIKD3Zvb03eLhZHZrkzP_hS3MqD_fuSPeTIgdSN6SzMS0id0hO-71Yo2aM5qTyZV1dyArbuc2OPmqrrfIVzi-jpDnqUUFNoOhKsJ_pTvZPSWLQnL5XujO9CU1vY/s800/menu9.gif);    padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background:      url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFdfnRbE78EdgwggCPIIKD3Zvb03eLhZHZrkzP_hS3MqD_fuSPeTIgdSN6SzMS0id0hO-71Yo2aM5qTyZV1dyArbuc2OPmqrrfIVzi-jpDnqUUFNoOhKsJ_pTvZPSWLQnL5XujO9CU1vY/s800/menu9.gif)    0 -32px; padding: 8px 0 0 35px; }

HTML Code:

 <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>

قائمه رقم4

CSS Code:

 #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/AVvXsEi2zZf71QJHRlybwMm8VJdaeadBbDUa0J4qlPvEFX6zWMmk307Pt4KRydo80MS7gGZhIsHaC570Z1ilHezbblgqm_Jg3i_ocqtiyYOfch41a8lmrg7vnCMs2CHwBYiswugYwCiuvoLYCL4/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/AVvXsEi2zZf71QJHRlybwMm8VJdaeadBbDUa0J4qlPvEFX6zWMmk307Pt4KRydo80MS7gGZhIsHaC570Z1ilHezbblgqm_Jg3i_ocqtiyYOfch41a8lmrg7vnCMs2CHwBYiswugYwCiuvoLYCL4/s800/menu6.gif)    0 -32px; padding: 8px 0 0 10px; }

HTML Code:

 <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>

قائمه رقم5

CSS Code:

 #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/AVvXsEgZzF5amJ6eP1043lPeWH89XoijBQjIMLvdT0FtU_90LpWqrAFpqd75C4ujtME5jhKQXwpWC6mHdpZ2Ox0yRdMCcyDv0KYV-MrTLkw6LMvbBrKaHszgWJPInHXnRa7f6SscymVDdssFzMU/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/AVvXsEgZzF5amJ6eP1043lPeWH89XoijBQjIMLvdT0FtU_90LpWqrAFpqd75C4ujtME5jhKQXwpWC6mHdpZ2Ox0yRdMCcyDv0KYV-MrTLkw6LMvbBrKaHszgWJPInHXnRa7f6SscymVDdssFzMU/s800/menu14.gif);    padding: 8px 0 0 10px; }

HTML Code:

 <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>

Navigation Menu #6

CSS Code:

 #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/AVvXsEgjsO01oAWI8d1iLei13n6bm78FynJC0bkkL16jg69cTaog6CpgWqqgxCXBZ0ix766dUHgIEuZH74XOXmAQaN37v6L3qL_QL0Fw-KqNZ6-TwxGwYk5ZtUg0B3avAubU_VMWCJXKWdIXFSo/s800/menu7.gif);    padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background:      url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjsO01oAWI8d1iLei13n6bm78FynJC0bkkL16jg69cTaog6CpgWqqgxCXBZ0ix766dUHgIEuZH74XOXmAQaN37v6L3qL_QL0Fw-KqNZ6-TwxGwYk5ZtUg0B3avAubU_VMWCJXKWdIXFSo/s800/menu7.gif)    0 -32px; padding: 8px 0 0 30px; }

HTML Code:

 <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>

Navigation Menu #7

CSS Code:

#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/AVvXsEhkdD1vYgugT8w2ncreqVHAtKAIIOrVq0YhYZoW-tV1GQB4IBaaFDwgeYDfFitnwSt7fS9QHuu-h8dvivgCI189bqpF7fdZZagGjJ9W7leT2ePB3FhQihcbYcPyf672Tcem1EOv96Wsppc/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/AVvXsEhkdD1vYgugT8w2ncreqVHAtKAIIOrVq0YhYZoW-tV1GQB4IBaaFDwgeYDfFitnwSt7fS9QHuu-h8dvivgCI189bqpF7fdZZagGjJ9W7leT2ePB3FhQihcbYcPyf672Tcem1EOv96Wsppc/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/AVvXsEhkdD1vYgugT8w2ncreqVHAtKAIIOrVq0YhYZoW-tV1GQB4IBaaFDwgeYDfFitnwSt7fS9QHuu-h8dvivgCI189bqpF7fdZZagGjJ9W7leT2ePB3FhQihcbYcPyf672Tcem1EOv96Wsppc/s800/menu2.gif)    0 -64px; padding: 8px 0 0 10px; }

HTML Code:

 <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>

Navigation Menu #8

CSS Code:

 #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/AVvXsEilV_Ex24fOSmCGdcMGw6AxRldNLg5GrPrwApmq5Vb5dY6kBxBN8monHCNuJjccdPG-DJOS-bazra5pVhQSkAv9lwOmBn_QmN9X1mnVA9T8zljcKJSFXKEhJ2t4967jVf9MAjjDar9nyNk/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/AVvXsEilV_Ex24fOSmCGdcMGw6AxRldNLg5GrPrwApmq5Vb5dY6kBxBN8monHCNuJjccdPG-DJOS-bazra5pVhQSkAv9lwOmBn_QmN9X1mnVA9T8zljcKJSFXKEhJ2t4967jVf9MAjjDar9nyNk/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/AVvXsEilV_Ex24fOSmCGdcMGw6AxRldNLg5GrPrwApmq5Vb5dY6kBxBN8monHCNuJjccdPG-DJOS-bazra5pVhQSkAv9lwOmBn_QmN9X1mnVA9T8zljcKJSFXKEhJ2t4967jVf9MAjjDar9nyNk/s800/menu9.gif)    0 -64px; padding: 8px 0 0 10px; }

HTML Code:

 <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>

Navigation Menu #9

CSS Code:

#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/AVvXsEhNg2JeVsGV8b2aLT6dZ6aN5PvatNUxJhUQbIRCXLooVNPk1GrJsAbggaN0cUG-0bLz9o4Q0NrtU1rCSPCWp8-86D6aplnzy_kiWcr8cPaCT-rWxGuavwDXQv1DOcSETe60FjJfmbUVzfc/s800/menu12.gif);    padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000;   background:     url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNg2JeVsGV8b2aLT6dZ6aN5PvatNUxJhUQbIRCXLooVNPk1GrJsAbggaN0cUG-0bLz9o4Q0NrtU1rCSPCWp8-86D6aplnzy_kiWcr8cPaCT-rWxGuavwDXQv1DOcSETe60FjJfmbUVzfc/s800/menu12.gif)    0 -32px; padding: 10px 0 0 35px; }

HTML Code:

 <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>

Navigation Menu #10

CSS Code:

 #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/AVvXsEg3xV3CdpdY4VGzpmaTKFyJY1-s9nX_DgZtqt-1SV9QjjeomsbQVB1qt0-NGLt73m5UzEGSwGYvNyFtmv0nyvWuR9Ud0yLUKYBrMexWId1aHitIoQH1LEGhxlVGnzlxYrcuNrfBQZicoaE/s800/menu13.gif);    padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D;    background:    url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3xV3CdpdY4VGzpmaTKFyJY1-s9nX_DgZtqt-1SV9QjjeomsbQVB1qt0-NGLt73m5UzEGSwGYvNyFtmv0nyvWuR9Ud0yLUKYBrMexWId1aHitIoQH1LEGhxlVGnzlxYrcuNrfBQZicoaE/s800/menu13.gif)    0 -32px; padding: 8px 0 0 10px; }

HTML Code:

 <div   id="menu13">
 <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>

Navigation Menu #11

CSS Code:

 #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/AVvXsEjHONQ7JnyTbtYxNYXCMAqyrF284Or4C8Vl1g1j01fOubtOCPb2pS_IOO4pK2tFDxkKYxFgNHdO3kDvDgNwpRaXlrjRiNg2APEPbS_6WYD6vSAC0c7p_FfkIpp5PqTUoJzZpPqkZKEC0rw/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/AVvXsEjHONQ7JnyTbtYxNYXCMAqyrF284Or4C8Vl1g1j01fOubtOCPb2pS_IOO4pK2tFDxkKYxFgNHdO3kDvDgNwpRaXlrjRiNg2APEPbS_6WYD6vSAC0c7p_FfkIpp5PqTUoJzZpPqkZKEC0rw/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/AVvXsEjHONQ7JnyTbtYxNYXCMAqyrF284Or4C8Vl1g1j01fOubtOCPb2pS_IOO4pK2tFDxkKYxFgNHdO3kDvDgNwpRaXlrjRiNg2APEPbS_6WYD6vSAC0c7p_FfkIpp5PqTUoJzZpPqkZKEC0rw/s800/menu4.gif)    0 -64px; padding: 8px 0 0 30px; }

HTML Code:

 <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>

Navigation Menu #12

CSS Code:

#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 Code:

 <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>

Navigation Menu #13

CSS Code:

 #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/AVvXsEhf3BzVs-rrx_4nAwJy-0ZLpspE_kemQs3o8MjZPY5AyzmfChzVmqitp-wTy7Y1t02vHmH-5hhbJUs1eKxOiA_cJoVbgydAgFiXH1j9Kf07GurvHQmd45ovvRHrY1vBcIWPgXZ3rdDQ494/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/AVvXsEhf3BzVs-rrx_4nAwJy-0ZLpspE_kemQs3o8MjZPY5AyzmfChzVmqitp-wTy7Y1t02vHmH-5hhbJUs1eKxOiA_cJoVbgydAgFiXH1j9Kf07GurvHQmd45ovvRHrY1vBcIWPgXZ3rdDQ494/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/AVvXsEhf3BzVs-rrx_4nAwJy-0ZLpspE_kemQs3o8MjZPY5AyzmfChzVmqitp-wTy7Y1t02vHmH-5hhbJUs1eKxOiA_cJoVbgydAgFiXH1j9Kf07GurvHQmd45ovvRHrY1vBcIWPgXZ3rdDQ494/s800/menu8.gif)    0 -64px; padding: 8px 0 0 25px; }

HTML Code:

 <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>

Navigation Menu #14

CSS Code:

#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/AVvXsEjZNfX0PhjJc8-IwxBxRjHUHG4oIXK9m-5qvpGyw4pz3qVLnkmt1T3ifX_Pj9Oo7rh05VBLYwx27qYa9N2DbAWwxFAUgp3BshNLqHVCqhxson7BmGIG6YsY9USYysv4F3MEzwK5zzdHiLQ/s800/menu8.gif)    ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739;    background:    url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZNfX0PhjJc8-IwxBxRjHUHG4oIXK9m-5qvpGyw4pz3qVLnkmt1T3ifX_Pj9Oo7rh05VBLYwx27qYa9N2DbAWwxFAUgp3BshNLqHVCqhxson7BmGIG6YsY9USYysv4F3MEzwK5zzdHiLQ/s800/menu8.gif)    0 -32px; padding: 8px 0 0 20px; }

HTML Code:

 <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>

Navigation Menu #15

CSS Code:

#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/AVvXsEiTMF209fVgTX0oz9JYyoz8ib7_LqqTOmADPJ-BjC6PCL2muSpdiQUBZ2dyISggnmBNhGejva-j-76zpJDsu21p9sNd4Be75Fqo_rLZ4XyYN9Unmk3dUr7cZ-4yet3LV_s8PHihtTeAO1E/s800/menu1.gif);    padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background:      url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTMF209fVgTX0oz9JYyoz8ib7_LqqTOmADPJ-BjC6PCL2muSpdiQUBZ2dyISggnmBNhGejva-j-76zpJDsu21p9sNd4Be75Fqo_rLZ4XyYN9Unmk3dUr7cZ-4yet3LV_s8PHihtTeAO1E/s800/menu1.gif)    0 -32px; padding: 8px 0 0 10px; }

HTML Code:

 <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>

Navigation Menu #16

CSS Code:

#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 Code:

 <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>

Navigation Menu #17

CSS Code:

 #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/AVvXsEg3R22lziHBtmfxy7SGQDTjqhKKHeJS1_UX9RjUwoMXI-B0yz35B3QcKtYg_GTtHcXr8Rr1dgOEM-AAG18rJ4vAvm1aHXbA6bBlebL4Gk-6m0ERr0CLm8uhcjKgphCa4npELY-J7kXjd2M/s800/menu3.gif);    padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7;    background:    url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3R22lziHBtmfxy7SGQDTjqhKKHeJS1_UX9RjUwoMXI-B0yz35B3QcKtYg_GTtHcXr8Rr1dgOEM-AAG18rJ4vAvm1aHXbA6bBlebL4Gk-6m0ERr0CLm8uhcjKgphCa4npELY-J7kXjd2M/s800/menu3.gif)    0 -32px; padding: 8px 0 0 10px; }

HTML Code:

 <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>

Navigation Menu #18

CSS Code:

#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/AVvXsEj5UcyXf6NdFIt8aeRUKH_dcUXCEAdkGqhCL9s_H74BSJiOZQYBoTyMKtvY5QLURrKn_hC_ROEsIeO6HOqm5uGUVS9R5q22iGqraZDAGQp9SpRgqaY5GlTjyUwt4UkgVfUSHU8x1RpiO_c/s400/menu11.gif);    padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944;    background:    url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5UcyXf6NdFIt8aeRUKH_dcUXCEAdkGqhCL9s_H74BSJiOZQYBoTyMKtvY5QLURrKn_hC_ROEsIeO6HOqm5uGUVS9R5q22iGqraZDAGQp9SpRgqaY5GlTjyUwt4UkgVfUSHU8x1RpiO_c/s400/menu11.gif)    0 -32px; padding: 8px 0 0 27px; }

HTML Code:

<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>

Navigation Menu #19

CSS Code:

 #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 Code:

 <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>

Navigation Menu #20

CSS Code:

#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/AVvXsEhjxmVSN17iIceyQlNoDRA5M2BgN_U8Awze2ykq7YRWCW_5R2hdaK2hR9BjNKwlgn-wnebuJ-F4eEriGoG5_jHWN-fpbRwrQkDpRlR6NdKjOfup-iJFYcyHd3o_DVgugqr98VJiUBFyikY/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/AVvXsEhjxmVSN17iIceyQlNoDRA5M2BgN_U8Awze2ykq7YRWCW_5R2hdaK2hR9BjNKwlgn-wnebuJ-F4eEriGoG5_jHWN-fpbRwrQkDpRlR6NdKjOfup-iJFYcyHd3o_DVgugqr98VJiUBFyikY/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/AVvXsEhjxmVSN17iIceyQlNoDRA5M2BgN_U8Awze2ykq7YRWCW_5R2hdaK2hR9BjNKwlgn-wnebuJ-F4eEriGoG5_jHWN-fpbRwrQkDpRlR6NdKjOfup-iJFYcyHd3o_DVgugqr98VJiUBFyikY/s800/menu1.gif)    0 -64px; padding: 8px 0 0 10px; }

HTML Code:

 <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>

Navigation Menu #21

CSS Code:

#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/AVvXsEhdI3pt0wdvD8mIV4oWDpaIcjxuzi-o33c1822JE_iyfUCoG0bYR_K5PL2GEfC4Ua7EtvCaxiOTlEDH62ZJAtNRKBd8pmUr0eUHHdehxKxYnu1jCA8JlEw8qrvJsM7LrDKbKstIr0I_WF8/s800/menu2.gif);    padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA;    background:    url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdI3pt0wdvD8mIV4oWDpaIcjxuzi-o33c1822JE_iyfUCoG0bYR_K5PL2GEfC4Ua7EtvCaxiOTlEDH62ZJAtNRKBd8pmUr0eUHHdehxKxYnu1jCA8JlEw8qrvJsM7LrDKbKstIr0I_WF8/s800/menu2.gif)    0 -32px; padding: 8px 0 0 32px; }

HTML Code:

 <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>

Navigation Menu #22

CSS Code:

#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/AVvXsEjjPHc66XOULu9I4ZbhSbJPO0d-42BDDAzoPbRUXJJFdx33D4Yqyggao4pCuN9Px_XDCmBxrXDoOP-GmXth95Klckd8WLZGwQdnkTWMoqxNrnLgDalt8y0fyZwD33kFE_Wds_IuP-nYzWw/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/AVvXsEjjPHc66XOULu9I4ZbhSbJPO0d-42BDDAzoPbRUXJJFdx33D4Yqyggao4pCuN9Px_XDCmBxrXDoOP-GmXth95Klckd8WLZGwQdnkTWMoqxNrnLgDalt8y0fyZwD33kFE_Wds_IuP-nYzWw/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/AVvXsEjjPHc66XOULu9I4ZbhSbJPO0d-42BDDAzoPbRUXJJFdx33D4Yqyggao4pCuN9Px_XDCmBxrXDoOP-GmXth95Klckd8WLZGwQdnkTWMoqxNrnLgDalt8y0fyZwD33kFE_Wds_IuP-nYzWw/s800/menu5.gif)    0 -64px; padding: 8px 25px 0 10px; text-align: right; }

HTML Code:

 <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>

Navigation Menu #23

CSS Code:

 #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/AVvXsEiyBRa8cPhEANcl92nimYfjQ1ytjj349lzgvj2ORWg1iBgc1RmlO0cEoS64jS4ZGOOdRyz-9Q0kP1UfL6wZHbpVevFzCwnDBnyCumOZPuxDIsi_ZBfMGPaMDfy0zBA0Pu7jnpboqzIZLUk/s800/menu5.gif);    padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background:      url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyBRa8cPhEANcl92nimYfjQ1ytjj349lzgvj2ORWg1iBgc1RmlO0cEoS64jS4ZGOOdRyz-9Q0kP1UfL6wZHbpVevFzCwnDBnyCumOZPuxDIsi_ZBfMGPaMDfy0zBA0Pu7jnpboqzIZLUk/s800/menu5.gif)    0 -32px; padding: 8px 0 0 10px; }

HTML Code:

 <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>

Navigation Menu #24

CSS Code:

#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/AVvXsEje291sHTSg77xFl4Y2clhBfRbfBpQwO6MV0S-uyhHVjPfoXDMSMvHfCFmFCAu_nCBVxBFR3y2F3HSAJt_70V_rxsMO5oggizEXGUEj3U7ffSazQQ8bjEvZO68T54mNuQrLB4SMC_asmhs/s800/menu4.gif);    padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background:      url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje291sHTSg77xFl4Y2clhBfRbfBpQwO6MV0S-uyhHVjPfoXDMSMvHfCFmFCAu_nCBVxBFR3y2F3HSAJt_70V_rxsMO5oggizEXGUEj3U7ffSazQQ8bjEvZO68T54mNuQrLB4SMC_asmhs/s800/menu4.gif)    0 -32px; padding: 8px 0 0 10px; }

HTML Code:

 <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>

Navigation Menu #25

CSS Code:

 #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/AVvXsEhnvRAIlTkUtS6yyFUgUPmA7j6wQq9tm6MDQIdSManC0i6F0C9a-uVNR5I76-K9MrVIVFYmRu97rH61SUTwgdqHHHzZuoEaN-CYfpHX2ZTxNRD5eaX8PAl4micL9d6SJvW7aHKrcYvA-ag/s800/menu10.gif);    padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834;    background:    url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnvRAIlTkUtS6yyFUgUPmA7j6wQq9tm6MDQIdSManC0i6F0C9a-uVNR5I76-K9MrVIVFYmRu97rH61SUTwgdqHHHzZuoEaN-CYfpHX2ZTxNRD5eaX8PAl4micL9d6SJvW7aHKrcYvA-ag/s800/menu10.gif)    0 -32px; padding: 8px 0 0 10px; }

HTML Code:

 <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>