Vertical Navigation CSS Menu မ်ားစြာေပးေနတယ္

1.  ၀င္လုိက္ပါ.. Blogger > Layout > Edit HTML

 ေအာက္ကပုံတိုင္းေတြ႕ပါမည္. အနီျပထားသလို ဆက္ကလစ္ပါ။

 ေအာက္ကပုံေရာက္တာနဲ႕ အနီ၀ိုင္းျပထားတဲ့အကြက္ကိုအမွန္ျခစ္ပါ။ ေနာက္ လိုအပ္ေသာကုဒ္
ရွာဖို႕ ctrl နဲ႕ f ကိုတြဲႏွိပ္ပါက  find ေဘာက္ေလးက်လာမည္။ ေဘာက္ထဲတြင္ ရွာေဖြလိုေသာ ကုဒ္.
]]></b:skin>     ကိုထည့္ျပီး enter ေခါက္လိုက္ပါ။

    3.   မိမိတို႕ ထည့္ရမည့္ css ကုဒ္မ်ားကို  ]]></b:skin>  သူ႕ အေပၚကပ္လွ်က္ ထည့္ေပးရမည္။
    4.   HTML ကုဒ္အေနနဲ႕ ေနရာဌါန  အမ်ိဳးမ်ိဴးရွိပါမယ္.. မိမိဘေလာ့က ညာဆိုဒ္ဘားး  ဘယ္ဆိုဒ္ဘား ဆိုတာရွိပါမယ္..  အဲတာကို အေျခခံျပီး HTML ကုဒ္ကို ထည့္ရမွာ ျဖစ္ပါတယ္... ကဲထည့္ၾကည့္မယ္....

• မိမိဘေလာ့က ညာဆိုဒ္ဘားဆိုပါက သည္ေပးထားတဲ့ ကုဒ္ <div id='sidebar-wrapper'>  သို႕မဟုတ္<div id='sidebar-wrapper-right'> ရဲ႕ေအာက္ကေန HTML ကုဒ္ကို ထည့္ေပးရပါမယ္။
• မိမိဘေလာ့က ဘယ္ဆိုဒ္ဘားျဖစ္ေနပါက  <div id='sidebar-wrapper-left'> သည္ကုဒ္ရဲ႕ ေအာက္ကေနကပ္ျပီး ထည့္ပါ။

    5.  ျပီးတဲံအခါမွာေတာ့ SAVE လို႕ရပါျပီ..ျပန္ၾကည့္လုိက္ပါ..လွပတဲ့ MENU ေလးရေနပါျပီ။

မိမိတို႕ ထည့္ရမဲ့ 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 ေလးေတြေနရာမွာ မိမိတို႕ လင့္ (URL) ကိုထည့္ပါ  Link1, Link2, Link3 ေတြေနရာမွာေတာ့ မိမိတို႕ ေပးမဲ့ ေခါင္းစဥ္အမည္ေတြပါ။ ဥပမာ။  ။ ကဗ်ာ-ဘာသာေရး စသျဖင့္ေပါ့.....

ကဲကဲ... MENU ေတြစိတ္ၾကိဳက္ ဖန္တီးနိဳင္ေစဖို႕... စုေဆာင္းရွာ ေဖြထားသမွ် မွ်ေ၀လိုက္ပါျပီ...

Navigation Menu #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/AVvXsEgAOVE16SETYJivOgfkLCZR7gY-gXN_m0lf_BsHL8aBBHZmHjg4Ufoq-h_L4yndN3oawtzq7uv1g4tVPjmyyY3swUMUxIHWR7RYGWlF-LnKzUmuwT7TEbtJlSv_nCRf9EtZVwHfZYlIeJA/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAOVE16SETYJivOgfkLCZR7gY-gXN_m0lf_BsHL8aBBHZmHjg4Ufoq-h_L4yndN3oawtzq7uv1g4tVPjmyyY3swUMUxIHWR7RYGWlF-LnKzUmuwT7TEbtJlSv_nCRf9EtZVwHfZYlIeJA/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>

Navigation Menu #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/AVvXsEiEtb6epf1L3XpEn8dmE-SAW4cjUBvsBJQDTgt0hH5JZeau00QM72SPzfdZ1OWV98GuPZp8v2VJ-RHXSdgj90er6kfT9JWVe50ci6Gl6gCahyphenhyphenwTlEq6hsyQge8fZ1mROHewJqGvNeBYtRs/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/AVvXsEiEtb6epf1L3XpEn8dmE-SAW4cjUBvsBJQDTgt0hH5JZeau00QM72SPzfdZ1OWV98GuPZp8v2VJ-RHXSdgj90er6kfT9JWVe50ci6Gl6gCahyphenhyphenwTlEq6hsyQge8fZ1mROHewJqGvNeBYtRs/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>

Navigation Menu #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/AVvXsEhtz-24vCsnQfwLtGFnCSXZgO7rPbBX1BXrpZ9bLVAue9jJPDO4J6_Weac6wXDOczO58MxAQ7zhndO-oL5AYNj3L9Mly_vbIO1sod-bdF2tCFTwKc14-yQuipPd6ZT9sG5RdNiNjq6DZ7I/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtz-24vCsnQfwLtGFnCSXZgO7rPbBX1BXrpZ9bLVAue9jJPDO4J6_Weac6wXDOczO58MxAQ7zhndO-oL5AYNj3L9Mly_vbIO1sod-bdF2tCFTwKc14-yQuipPd6ZT9sG5RdNiNjq6DZ7I/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>

Navigation Menu #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/AVvXsEjeCqewXrQhhhMPJaUQ_gf040I3DSoAbGF8N6sWmw0_bsxTF-BAjVxcUVVpvbCod6AHGfCx7qF3rETRUaj9_zQHnR1mD8JoC2VocU0WZHD-6G4owkLWR1ZmR_nZ_i1gAKmrZWM00jdtcWo/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/AVvXsEjeCqewXrQhhhMPJaUQ_gf040I3DSoAbGF8N6sWmw0_bsxTF-BAjVxcUVVpvbCod6AHGfCx7qF3rETRUaj9_zQHnR1mD8JoC2VocU0WZHD-6G4owkLWR1ZmR_nZ_i1gAKmrZWM00jdtcWo/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>

Navigation Menu #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/AVvXsEjI7gBb4sxQmbdtgFEkUtkaNb7_nUo_dmoCTBdrjlc_6yhnvhmMFebYJuf_R3bMd0m3Fd8FpsTI2GpDfjFkGfc2Dm7wmjYqUpnatiYSYtCrulLpb02k4w9YJ5_BhqTcE5tTpQbd9dcOh-Y/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/AVvXsEjI7gBb4sxQmbdtgFEkUtkaNb7_nUo_dmoCTBdrjlc_6yhnvhmMFebYJuf_R3bMd0m3Fd8FpsTI2GpDfjFkGfc2Dm7wmjYqUpnatiYSYtCrulLpb02k4w9YJ5_BhqTcE5tTpQbd9dcOh-Y/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/AVvXsEjfVHdqbQS3Iwol3g3SUN1raeqXNXRjvWnohn1hhJpcw_t31dY9RWy7wRgRhVGexM6U3ZClt-1c4_-2_iFIHum4MmsdUJ32EbPdxabAk1RQvxPWccjRvD3QDaL4oxSRFZPp-yN7oqGCzJw/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfVHdqbQS3Iwol3g3SUN1raeqXNXRjvWnohn1hhJpcw_t31dY9RWy7wRgRhVGexM6U3ZClt-1c4_-2_iFIHum4MmsdUJ32EbPdxabAk1RQvxPWccjRvD3QDaL4oxSRFZPp-yN7oqGCzJw/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/AVvXsEijasMC0cmJ7A-yjky0hGtCH3Eu1kjTAqSAvHXHygVpN_Gc7c6jsnjCCFNwEJrMAAMU1lB95T5PKGLg2oe_olsL21CMcDpD8K9g6ZKlAsUc5BPull80NV7fUMx__17GfBj1vMQ70_sG3sY/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/AVvXsEijasMC0cmJ7A-yjky0hGtCH3Eu1kjTAqSAvHXHygVpN_Gc7c6jsnjCCFNwEJrMAAMU1lB95T5PKGLg2oe_olsL21CMcDpD8K9g6ZKlAsUc5BPull80NV7fUMx__17GfBj1vMQ70_sG3sY/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/AVvXsEijasMC0cmJ7A-yjky0hGtCH3Eu1kjTAqSAvHXHygVpN_Gc7c6jsnjCCFNwEJrMAAMU1lB95T5PKGLg2oe_olsL21CMcDpD8K9g6ZKlAsUc5BPull80NV7fUMx__17GfBj1vMQ70_sG3sY/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/AVvXsEg9m4Y5lOGkeOCjE463QfIlkrBk-zWOaEH_OapXCofDH82vNUTbGQLhgpNjStLRFTY9Jqkust-MbGecCsH0Nw1vNn7oMzVSlII5JLCmWyGqgXSUb7sEaCe2QmQfH4A_p8NunkCeAXDeB2s/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/AVvXsEg9m4Y5lOGkeOCjE463QfIlkrBk-zWOaEH_OapXCofDH82vNUTbGQLhgpNjStLRFTY9Jqkust-MbGecCsH0Nw1vNn7oMzVSlII5JLCmWyGqgXSUb7sEaCe2QmQfH4A_p8NunkCeAXDeB2s/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/AVvXsEg9m4Y5lOGkeOCjE463QfIlkrBk-zWOaEH_OapXCofDH82vNUTbGQLhgpNjStLRFTY9Jqkust-MbGecCsH0Nw1vNn7oMzVSlII5JLCmWyGqgXSUb7sEaCe2QmQfH4A_p8NunkCeAXDeB2s/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/AVvXsEgKTCTEVYVMTNtn_jm-JjSc0Jfzewu7LdyHKdQiMuSlzOvhTkhyphenhyphenleCXPmMyxvjlpXODy5yXZxUkcT9jQA6wB50hsJebJ5doyU2ynLWdgzeDeJmi_wj5CgIeWg1sb837HDRULr1S_57mqVU/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKTCTEVYVMTNtn_jm-JjSc0Jfzewu7LdyHKdQiMuSlzOvhTkhyphenhyphenleCXPmMyxvjlpXODy5yXZxUkcT9jQA6wB50hsJebJ5doyU2ynLWdgzeDeJmi_wj5CgIeWg1sb837HDRULr1S_57mqVU/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/AVvXsEhIGpm-o57I5TzSNRtpFgCbsKx1g53F7m8KmMvwoh-hbLrMdqmBVMuXolEGl2srdfE_4TKOg5FSw5Urlrv3d4aFA_9sqNuPmVUUwuPr4jnhkY09D5ogYtURNyWKHKhLenMrl9yDI8IZLho/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIGpm-o57I5TzSNRtpFgCbsKx1g53F7m8KmMvwoh-hbLrMdqmBVMuXolEGl2srdfE_4TKOg5FSw5Urlrv3d4aFA_9sqNuPmVUUwuPr4jnhkY09D5ogYtURNyWKHKhLenMrl9yDI8IZLho/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/AVvXsEj5_T35WRfHtB4MFMYUITzIFbLFKvLebbhFsDB8fwP6SHF1T5jifzAmSsCeVE1N_swcOehoipf0CjnLfmxzXJq2d0WWzrwxPVpC0_6Ngo9FIfcCLGZfh6SBUtR2xdWDvPIPag6q6aJtaKY/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/AVvXsEj5_T35WRfHtB4MFMYUITzIFbLFKvLebbhFsDB8fwP6SHF1T5jifzAmSsCeVE1N_swcOehoipf0CjnLfmxzXJq2d0WWzrwxPVpC0_6Ngo9FIfcCLGZfh6SBUtR2xdWDvPIPag6q6aJtaKY/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/AVvXsEj5_T35WRfHtB4MFMYUITzIFbLFKvLebbhFsDB8fwP6SHF1T5jifzAmSsCeVE1N_swcOehoipf0CjnLfmxzXJq2d0WWzrwxPVpC0_6Ngo9FIfcCLGZfh6SBUtR2xdWDvPIPag6q6aJtaKY/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/AVvXsEibtYKjI0FY24tugvMA_bFF0c4-NmkQSWH_QXKTOOE6IvuUuSnp75l4HeeriE83FDBqab6lxEw93E0Eo0e8U5nz1c4EZy6E-jjT3RcHyY9iNR7vc3xCMdux02dNBEC5uIznzC_ap7OA2KY/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/AVvXsEibtYKjI0FY24tugvMA_bFF0c4-NmkQSWH_QXKTOOE6IvuUuSnp75l4HeeriE83FDBqab6lxEw93E0Eo0e8U5nz1c4EZy6E-jjT3RcHyY9iNR7vc3xCMdux02dNBEC5uIznzC_ap7OA2KY/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/AVvXsEibtYKjI0FY24tugvMA_bFF0c4-NmkQSWH_QXKTOOE6IvuUuSnp75l4HeeriE83FDBqab6lxEw93E0Eo0e8U5nz1c4EZy6E-jjT3RcHyY9iNR7vc3xCMdux02dNBEC5uIznzC_ap7OA2KY/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/AVvXsEhi4WEspsfZLGJzNRv9UPMi2XdLbX2R_xQ0PlN-3QlfrYOK8B8H83VSSYDqbfDH2A7TG72Gs4x6NoNeOu-to6yqmfkK-u8dPl4HYaFEKHHif9miASptBDL-SS1iodANW1Io2hIKOSYlm20/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi4WEspsfZLGJzNRv9UPMi2XdLbX2R_xQ0PlN-3QlfrYOK8B8H83VSSYDqbfDH2A7TG72Gs4x6NoNeOu-to6yqmfkK-u8dPl4HYaFEKHHif9miASptBDL-SS1iodANW1Io2hIKOSYlm20/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/AVvXsEhvXE6Gx9gA6_4x9hqhEkUkPOq6hlgT5RPzOnJHxYLc-QDKW9WxlLL4Xi5kYUhZL0nfwPkr3QIiNvBMlsQoRTAgSLuuBBIE4xp4V9K8CNkhmmYBXuDGNrf47syDvzXwbDzldyzrngSb6yk/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvXE6Gx9gA6_4x9hqhEkUkPOq6hlgT5RPzOnJHxYLc-QDKW9WxlLL4Xi5kYUhZL0nfwPkr3QIiNvBMlsQoRTAgSLuuBBIE4xp4V9K8CNkhmmYBXuDGNrf47syDvzXwbDzldyzrngSb6yk/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/AVvXsEi-0FGD2SqYj-vKGO64fi7g2bnPNcrC5rYRrTznqPORQapC6t74KXoECvkSCxcOT5PWEe-hwUdn6Fu5kyQ0qFXdsMCrPD9Mux5dSHKA_NX6d8e9jHfWG7i7uam1_tJJsS-Y_FTNWZrZYZw/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-0FGD2SqYj-vKGO64fi7g2bnPNcrC5rYRrTznqPORQapC6t74KXoECvkSCxcOT5PWEe-hwUdn6Fu5kyQ0qFXdsMCrPD9Mux5dSHKA_NX6d8e9jHfWG7i7uam1_tJJsS-Y_FTNWZrZYZw/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/AVvXsEilBcB7UPWBlIlJRTi8DMQ0NHfoplO4jyN4ayxLZvtBJVylvziXpRg1rZ4oA34GO-tN18eTA7OYLURYVAPBuCgortGx8nm6OeWoHEUw9SK9wa8u0GyUA07SJxkmlZMacE4L_H3rpetjxms/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilBcB7UPWBlIlJRTi8DMQ0NHfoplO4jyN4ayxLZvtBJVylvziXpRg1rZ4oA34GO-tN18eTA7OYLURYVAPBuCgortGx8nm6OeWoHEUw9SK9wa8u0GyUA07SJxkmlZMacE4L_H3rpetjxms/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/AVvXsEigFovlw4YOuiitli4bv3JPEikkL4IksEGdGbUdeXMqGvO_6v3azqmPiLsfI4kFpsihE0R2xvcINVM5ZQnvmr_DH-zLvvTsJ09ag6WwYqns6RPN8qxVLhltEanvDPaat3vb4KDfO-odfms/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/AVvXsEigFovlw4YOuiitli4bv3JPEikkL4IksEGdGbUdeXMqGvO_6v3azqmPiLsfI4kFpsihE0R2xvcINVM5ZQnvmr_DH-zLvvTsJ09ag6WwYqns6RPN8qxVLhltEanvDPaat3vb4KDfO-odfms/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/AVvXsEigFovlw4YOuiitli4bv3JPEikkL4IksEGdGbUdeXMqGvO_6v3azqmPiLsfI4kFpsihE0R2xvcINVM5ZQnvmr_DH-zLvvTsJ09ag6WwYqns6RPN8qxVLhltEanvDPaat3vb4KDfO-odfms/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/AVvXsEjqKGSR2EHbpn9qaBFg0V2YeY174NHHaGRCwkbe7UvC99ZjKrkl9QWElSq46T1tsGe0Wh4UdusVU5m-_QJJPdL_SE8p1ZwupoZkXpnpLShYZ3Jjjw5Tz6yHLvbWWPdjpehOq70gXdPjzE8/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqKGSR2EHbpn9qaBFg0V2YeY174NHHaGRCwkbe7UvC99ZjKrkl9QWElSq46T1tsGe0Wh4UdusVU5m-_QJJPdL_SE8p1ZwupoZkXpnpLShYZ3Jjjw5Tz6yHLvbWWPdjpehOq70gXdPjzE8/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/AVvXsEgSqRIuNye9MsGiFzZ9hF7QopnN9uYbLOxM74qr-NjjphZckQ-v-xLve-QEorzDzL9Ii8QgbZrv1ydMOxOM_0iaFW7-9ZVUbdhQ4lTq3Saeo-w4Ej_Upp8_oMNMJAGU5cN84AuNsEqwk5g/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/AVvXsEgSqRIuNye9MsGiFzZ9hF7QopnN9uYbLOxM74qr-NjjphZckQ-v-xLve-QEorzDzL9Ii8QgbZrv1ydMOxOM_0iaFW7-9ZVUbdhQ4lTq3Saeo-w4Ej_Upp8_oMNMJAGU5cN84AuNsEqwk5g/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/AVvXsEgSqRIuNye9MsGiFzZ9hF7QopnN9uYbLOxM74qr-NjjphZckQ-v-xLve-QEorzDzL9Ii8QgbZrv1ydMOxOM_0iaFW7-9ZVUbdhQ4lTq3Saeo-w4Ej_Upp8_oMNMJAGU5cN84AuNsEqwk5g/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/AVvXsEjsScZuv6_Wu0RjP5ND9SKEqZlzlGpl7ykz2sb1GIxu2hpzlTfegz9_K5rNYdEQe_RRluxAOQrwZptoZy6bIqjmFE9FtrnSXFgm02FmGqC2jOvc4ff2w3Yhrb3-WTqmnsRoa03VyYi3S84/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsScZuv6_Wu0RjP5ND9SKEqZlzlGpl7ykz2sb1GIxu2hpzlTfegz9_K5rNYdEQe_RRluxAOQrwZptoZy6bIqjmFE9FtrnSXFgm02FmGqC2jOvc4ff2w3Yhrb3-WTqmnsRoa03VyYi3S84/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/AVvXsEiZTmjprpeC6V9tmuESJENkBvBisvk7aUKTx7MTEQaCzrrsNCEgdApG3zsj7UYyXFqX2r53SErNfC6SNR8Y4UY8Qr3sr2duiJ5A_ahsmlsvWve-tdMD7mNHLXSHnrEgFHUG34Wsw1Oajw8/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZTmjprpeC6V9tmuESJENkBvBisvk7aUKTx7MTEQaCzrrsNCEgdApG3zsj7UYyXFqX2r53SErNfC6SNR8Y4UY8Qr3sr2duiJ5A_ahsmlsvWve-tdMD7mNHLXSHnrEgFHUG34Wsw1Oajw8/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/AVvXsEi1OlLphyphenhyphenSNInKPoDgF9X0SQitLxRWjRarruRdkctjntHnaomqKVgJkZkl_0DIPYGq6zmN0dGvVCef_N969iOo2lHPfaEuZa5l8R1QLlGRM8weU3WGTURMDqdKG9K6XBAYE3NKx9969T98/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1OlLphyphenhyphenSNInKPoDgF9X0SQitLxRWjRarruRdkctjntHnaomqKVgJkZkl_0DIPYGq6zmN0dGvVCef_N969iOo2lHPfaEuZa5l8R1QLlGRM8weU3WGTURMDqdKG9K6XBAYE3NKx9969T98/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>


ေမတၱာေစတနာအျပည့္ျဖင့္ မွ်ေ၀လိုက္ပါျပီ....အားလုံးေပ်ာ္ရႊင္ေက်နပ္နိဳင္ၾကပါေစ။
ေအာင္ေအာင္(မကစ)
www.ledimyethar.com
www.depelyin.co.cc
www.aungkyaw.com