ကိုထည့္ျပီး 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/AVvXsEisaL7Fkj1DH1LYSFEjR5yU9Ay8V0QtOWqYm6JXdFIArNPfUpnh9qxrjtWA88nsZ5kHyKI40mKB7PWI0Np4NdokqTN1ROyiATx28LSRoOTVtyWrhdjaibPAiVsr7vS7K1edYsk3dJzl4eI/s800/menu6.gif);
  padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: 
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisaL7Fkj1DH1LYSFEjR5yU9Ay8V0QtOWqYm6JXdFIArNPfUpnh9qxrjtWA88nsZ5kHyKI40mKB7PWI0Np4NdokqTN1ROyiATx28LSRoOTVtyWrhdjaibPAiVsr7vS7K1edYsk3dJzl4eI/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/AVvXsEh9G453im-dUDbsU9Cz5eDY84CF-AeV246gLHfWOc-6bshFCpBDRYnNU7OYltKKaSBa6l6AdypZpNAhSBELbYB04Pih_-_Yfp8PE7cVeSSsYFsylNaJpZz88vCOU-8x1r7rmQtAMSAbh1M/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/AVvXsEh9G453im-dUDbsU9Cz5eDY84CF-AeV246gLHfWOc-6bshFCpBDRYnNU7OYltKKaSBa6l6AdypZpNAhSBELbYB04Pih_-_Yfp8PE7cVeSSsYFsylNaJpZz88vCOU-8x1r7rmQtAMSAbh1M/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/AVvXsEjtr5FT05tBT8RMMyWUi4Q6eMR6euuGbCZNzF0atAauqTc09pfS_jvwon7eAsd33Py1grpFCp_eV9K3FupEVmKyxTxfG_jc8j3lGYr-cQugYrmTDFE5rI3k6pNWaZv2NCpwIM_XOXFlppw/s800/menu9.gif);
  padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: 
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtr5FT05tBT8RMMyWUi4Q6eMR6euuGbCZNzF0atAauqTc09pfS_jvwon7eAsd33Py1grpFCp_eV9K3FupEVmKyxTxfG_jc8j3lGYr-cQugYrmTDFE5rI3k6pNWaZv2NCpwIM_XOXFlppw/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/AVvXsEhHft__LMH5spgLidYDOln3iD6UwJ3Pu-75dmszwvRIxgAQlzfkMn2r089StTDj38R_qBKWcHR3fPvVTonZP0yBkCHXcBHyWslB8eyvkJxYHBxa0-J7TIfScUoNzksmBbWhl6UWFa_f2LY/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/AVvXsEhHft__LMH5spgLidYDOln3iD6UwJ3Pu-75dmszwvRIxgAQlzfkMn2r089StTDj38R_qBKWcHR3fPvVTonZP0yBkCHXcBHyWslB8eyvkJxYHBxa0-J7TIfScUoNzksmBbWhl6UWFa_f2LY/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/AVvXsEjN61Qn2igpX4-BCF2B3GeXs5jXik_notoyZhXUjo4x8UBpLhj1r8ID7vJakk-Xbru7VXklkrgFCeDXXRihv5uW46R29Wl5AUBb_72k-Xh5lm1u59QL9StalMVHydxE8z-nJHKV1FopZlA/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/AVvXsEjN61Qn2igpX4-BCF2B3GeXs5jXik_notoyZhXUjo4x8UBpLhj1r8ID7vJakk-Xbru7VXklkrgFCeDXXRihv5uW46R29Wl5AUBb_72k-Xh5lm1u59QL9StalMVHydxE8z-nJHKV1FopZlA/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/AVvXsEjKrCZlnWdkoTbS4sYDW1K79aXszKM66m0CoTcvIcmdPajq3zWA3ieDqtH_S5JEXQ89r9viPOedawrXNGimXy1PEuGeLHTVQE93iQURNmf_u93eiTbuSFm5j9VpBO-p50gBcrBODFh1yBY/s800/menu7.gif);
  padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: 
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKrCZlnWdkoTbS4sYDW1K79aXszKM66m0CoTcvIcmdPajq3zWA3ieDqtH_S5JEXQ89r9viPOedawrXNGimXy1PEuGeLHTVQE93iQURNmf_u93eiTbuSFm5j9VpBO-p50gBcrBODFh1yBY/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/AVvXsEjlo2rk2tHNjq1j4bCn-tiBI9Z3Hp29PDNCspDSxmfgyTBvOZXOa8H0GBhyXeV8jyOuaAAnfWU8a_GDAhDxC8vs_-5yjuRd-3rTA7BB0ERLl0Wbda_UEr4p25FKaUY7jxd5dC8z5HeTt0I/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/AVvXsEjlo2rk2tHNjq1j4bCn-tiBI9Z3Hp29PDNCspDSxmfgyTBvOZXOa8H0GBhyXeV8jyOuaAAnfWU8a_GDAhDxC8vs_-5yjuRd-3rTA7BB0ERLl0Wbda_UEr4p25FKaUY7jxd5dC8z5HeTt0I/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/AVvXsEjlo2rk2tHNjq1j4bCn-tiBI9Z3Hp29PDNCspDSxmfgyTBvOZXOa8H0GBhyXeV8jyOuaAAnfWU8a_GDAhDxC8vs_-5yjuRd-3rTA7BB0ERLl0Wbda_UEr4p25FKaUY7jxd5dC8z5HeTt0I/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/AVvXsEhsHvr_uOTkJFAbhiAaX1BGOsJ3SUosNbiO7yJiCB-sjiUiJ16XzyoK2vvsrntOjME59pUWzUMskPVD_DPx0OhFklR493IjDybVOBzCXk0_3LNS47mrZrWJvshnfrCUkqSerwmhrpCYmvo/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/AVvXsEhsHvr_uOTkJFAbhiAaX1BGOsJ3SUosNbiO7yJiCB-sjiUiJ16XzyoK2vvsrntOjME59pUWzUMskPVD_DPx0OhFklR493IjDybVOBzCXk0_3LNS47mrZrWJvshnfrCUkqSerwmhrpCYmvo/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/AVvXsEhsHvr_uOTkJFAbhiAaX1BGOsJ3SUosNbiO7yJiCB-sjiUiJ16XzyoK2vvsrntOjME59pUWzUMskPVD_DPx0OhFklR493IjDybVOBzCXk0_3LNS47mrZrWJvshnfrCUkqSerwmhrpCYmvo/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/AVvXsEiYbUe8H2U9YOg8PsbYeGKOsUi6QJNUVolxZ33-e6PiSyBABaMysKlJcxMSzxMQxLuK9jLJD5Kd4rnpETP0L1plTa4pjhanPiTo9EhsyESTcQHJUAn3c_58baRHoidKy_oYSYk2L9yA7FA/s800/menu12.gif);
  padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; 
background:   
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYbUe8H2U9YOg8PsbYeGKOsUi6QJNUVolxZ33-e6PiSyBABaMysKlJcxMSzxMQxLuK9jLJD5Kd4rnpETP0L1plTa4pjhanPiTo9EhsyESTcQHJUAn3c_58baRHoidKy_oYSYk2L9yA7FA/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/AVvXsEgW6pbIfSudJE6Xr1pIBnBZ-dYDsYUnLfhA8nS1vpj4gA4xqbVsbdlsfK-YUA2C6ICf6n0sFikPQK8vDULvSEtcaYjEfrJ9fiuZu7wkvO5Vwy-lC63c_GZLcpdcH3jFsbmSB5iN1R46wEQ/s800/menu13.gif);
  padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D;  
background:  
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW6pbIfSudJE6Xr1pIBnBZ-dYDsYUnLfhA8nS1vpj4gA4xqbVsbdlsfK-YUA2C6ICf6n0sFikPQK8vDULvSEtcaYjEfrJ9fiuZu7wkvO5Vwy-lC63c_GZLcpdcH3jFsbmSB5iN1R46wEQ/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/AVvXsEg3CW5DjzZBRz4TXpW5gl-DECzmw8IczOvPDrADAN2OKRTjC0r7M5d8jhDT_E7PX1VfC4zohFbKC2-DZCQQNlmYVi0HknBpamTQuPFG6vOamGkjvWSAejboYjy4mmVY9QO85UXbKi-ClBM/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/AVvXsEg3CW5DjzZBRz4TXpW5gl-DECzmw8IczOvPDrADAN2OKRTjC0r7M5d8jhDT_E7PX1VfC4zohFbKC2-DZCQQNlmYVi0HknBpamTQuPFG6vOamGkjvWSAejboYjy4mmVY9QO85UXbKi-ClBM/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/AVvXsEg3CW5DjzZBRz4TXpW5gl-DECzmw8IczOvPDrADAN2OKRTjC0r7M5d8jhDT_E7PX1VfC4zohFbKC2-DZCQQNlmYVi0HknBpamTQuPFG6vOamGkjvWSAejboYjy4mmVY9QO85UXbKi-ClBM/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/AVvXsEjHsq-otfxSVjAlL-QwxzlVMjo7evHBYlIM4TyN0TuVAUIeEM_NX3ssOQUEJtgQ67E4mxJHi_TmHIsQTfcuc9m2soLlT-bmoO_eAuWQ7o8I1vD_lyw49d0OQ_16a1qm4BKkYF1Cr_Vsr4Q/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/AVvXsEjHsq-otfxSVjAlL-QwxzlVMjo7evHBYlIM4TyN0TuVAUIeEM_NX3ssOQUEJtgQ67E4mxJHi_TmHIsQTfcuc9m2soLlT-bmoO_eAuWQ7o8I1vD_lyw49d0OQ_16a1qm4BKkYF1Cr_Vsr4Q/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/AVvXsEjHsq-otfxSVjAlL-QwxzlVMjo7evHBYlIM4TyN0TuVAUIeEM_NX3ssOQUEJtgQ67E4mxJHi_TmHIsQTfcuc9m2soLlT-bmoO_eAuWQ7o8I1vD_lyw49d0OQ_16a1qm4BKkYF1Cr_Vsr4Q/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/AVvXsEjMi4GEcFVbCvTkScWQ9J32KV1BLv1VMD_44DjvnY7f8UXs5ZrV-6CKVWg5Vk2YgcPXcN3sMio_8X-YeAotgYQ5qlgbmYx1GL3VCRAfNaXVMFmv_LFT3XwLIg8y0t3INJkC1z4CDSRTk-E/s800/menu8.gif)
  ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739;  
background:  
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMi4GEcFVbCvTkScWQ9J32KV1BLv1VMD_44DjvnY7f8UXs5ZrV-6CKVWg5Vk2YgcPXcN3sMio_8X-YeAotgYQ5qlgbmYx1GL3VCRAfNaXVMFmv_LFT3XwLIg8y0t3INJkC1z4CDSRTk-E/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/AVvXsEhZ6083MqpEEyW0yt_3ARmnqAQR5MMUU1it7kp72KotAjyLLgy_CSXVDLHeq6SWX1gTWKGJUiTOIVkz1OThI4VUxL6muBJ445xmtNhFg8fc3hhPY5_MP4YlOwVqceyj6H5DRn5H-c7yfzM/s800/menu1.gif);
  padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: 
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6083MqpEEyW0yt_3ARmnqAQR5MMUU1it7kp72KotAjyLLgy_CSXVDLHeq6SWX1gTWKGJUiTOIVkz1OThI4VUxL6muBJ445xmtNhFg8fc3hhPY5_MP4YlOwVqceyj6H5DRn5H-c7yfzM/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/AVvXsEgWV3SAuUa-OZt4DseeWsDlbect-iF-f71IGUoZtVDNoyYMhBwjrB11faRyMvdDtob8BLvwbBgQpY74lU5GGsiwiJtLhS4lmWfMx4IZRUj56ay4XhS-l3sHU3bsq-7ei9YUHOy5KlgYjfg/s800/menu3.gif);
  padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7;  
background:  
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWV3SAuUa-OZt4DseeWsDlbect-iF-f71IGUoZtVDNoyYMhBwjrB11faRyMvdDtob8BLvwbBgQpY74lU5GGsiwiJtLhS4lmWfMx4IZRUj56ay4XhS-l3sHU3bsq-7ei9YUHOy5KlgYjfg/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/AVvXsEg2VIHLWI65PaVuNAI4ONcgy6IdlxYaGNWPXlmA6H65fRaS4wFvBYjlw7QJbXWF2t46d-uulqP2LlEfIJRvayNp1247uEJpYV1rWojikd2T77d_zmXycWjclfSNjGMixh4sBQxXcPk4W1M/s400/menu11.gif);
  padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944;  
background:  
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2VIHLWI65PaVuNAI4ONcgy6IdlxYaGNWPXlmA6H65fRaS4wFvBYjlw7QJbXWF2t46d-uulqP2LlEfIJRvayNp1247uEJpYV1rWojikd2T77d_zmXycWjclfSNjGMixh4sBQxXcPk4W1M/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/AVvXsEjYnKq21wE7BVQR865vh7W6A38ITXxxsO0hA8JzoPtvA_nnnQ5C6hKngaz0beJjQaRwYrgIwMAmZaF-E3Mqu_WTFBc1qU5gGVR0Mqph9sPoHiQUQL2tP3u2TAfs8bhCVdF285EGK7ozMBc/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/AVvXsEjYnKq21wE7BVQR865vh7W6A38ITXxxsO0hA8JzoPtvA_nnnQ5C6hKngaz0beJjQaRwYrgIwMAmZaF-E3Mqu_WTFBc1qU5gGVR0Mqph9sPoHiQUQL2tP3u2TAfs8bhCVdF285EGK7ozMBc/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/AVvXsEjYnKq21wE7BVQR865vh7W6A38ITXxxsO0hA8JzoPtvA_nnnQ5C6hKngaz0beJjQaRwYrgIwMAmZaF-E3Mqu_WTFBc1qU5gGVR0Mqph9sPoHiQUQL2tP3u2TAfs8bhCVdF285EGK7ozMBc/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/AVvXsEj38KHkVwtWJxvBnvsvFIyIqCmbb8AU05xsJDtiRU8YFKCSsteAsbjDn9utD9aeD3dt4GDwpcKI4nWR79pj6kHsCdXPwJyDHhPKjcAdwibpRZJxRUEtFq25tJbOYwMC_x88HLhu-Sm41z4/s800/menu2.gif);
  padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA;  
background:  
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj38KHkVwtWJxvBnvsvFIyIqCmbb8AU05xsJDtiRU8YFKCSsteAsbjDn9utD9aeD3dt4GDwpcKI4nWR79pj6kHsCdXPwJyDHhPKjcAdwibpRZJxRUEtFq25tJbOYwMC_x88HLhu-Sm41z4/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/AVvXsEhoHWhY0PfrY4uFAMRWd5q-0jLN8Ca1tp-dhcsUFWwwWd52jdE1gFc9-Q053AlCK0MM8VMkxwOvMd6ANnnlhzd07y2CyaaeW46EwfMETpupI-11-Qd4ZiBPDKh5W7MtdK_86viG4r3MzQI/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/AVvXsEhoHWhY0PfrY4uFAMRWd5q-0jLN8Ca1tp-dhcsUFWwwWd52jdE1gFc9-Q053AlCK0MM8VMkxwOvMd6ANnnlhzd07y2CyaaeW46EwfMETpupI-11-Qd4ZiBPDKh5W7MtdK_86viG4r3MzQI/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/AVvXsEhoHWhY0PfrY4uFAMRWd5q-0jLN8Ca1tp-dhcsUFWwwWd52jdE1gFc9-Q053AlCK0MM8VMkxwOvMd6ANnnlhzd07y2CyaaeW46EwfMETpupI-11-Qd4ZiBPDKh5W7MtdK_86viG4r3MzQI/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/AVvXsEh8bH7LQn75hFBoBRyV9MmrSWAW33Z8zH3_TyqLYWbaJacVVdDJ9PxnAHw7xfoASGMKw_hqh_MtkbA-N_a8vdHagDbWQ5ea9PO_NwML0TunGZbBdGlN9tcnk3RnxvL-eNo0D0ZB0LTnEeU/s800/menu5.gif);
  padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: 
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8bH7LQn75hFBoBRyV9MmrSWAW33Z8zH3_TyqLYWbaJacVVdDJ9PxnAHw7xfoASGMKw_hqh_MtkbA-N_a8vdHagDbWQ5ea9PO_NwML0TunGZbBdGlN9tcnk3RnxvL-eNo0D0ZB0LTnEeU/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/AVvXsEhjTOHMgNLqwOgNVJjtYnPI3_7zC0BnucNMXji58gnDEPGyAYQSIzOzrDOsLr5XD775r9f5SRms4e05WHg0kQ9LElXfnl6Jsv9bTLij11I9ThklFVDlF3EwfzXJpjzXDVEzgyTXi3YN4H0/s800/menu4.gif);
  padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: 
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjTOHMgNLqwOgNVJjtYnPI3_7zC0BnucNMXji58gnDEPGyAYQSIzOzrDOsLr5XD775r9f5SRms4e05WHg0kQ9LElXfnl6Jsv9bTLij11I9ThklFVDlF3EwfzXJpjzXDVEzgyTXi3YN4H0/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/AVvXsEh2tgYEXvNs-syHhSKs68OzrQvNJJV10H-Y0nR7h5oAUx_zmCugmoYjhz7QmfN8qmDYbHrb4cwQllCuozmAfds4D5hKA0PXLwFOjTCj-juV9nupxzNucK9P8z4eFBz4A49JDXs8IaiqftQ/s800/menu10.gif);
  padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834;  
background:  
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2tgYEXvNs-syHhSKs68OzrQvNJJV10H-Y0nR7h5oAUx_zmCugmoYjhz7QmfN8qmDYbHrb4cwQllCuozmAfds4D5hKA0PXLwFOjTCj-juV9nupxzNucK9P8z4eFBz4A49JDXs8IaiqftQ/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>

Posted in: ဘေလာ့နည္းပညာ

တနသၤာရီသား (နည္းပညာ)

April 20, 2015

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

Navigation Menu #1

Navigation Menu #2

Navigation Menu #3

Navigation Menu #4

Navigation Menu #5

Navigation Menu #6

Navigation Menu #7

Navigation Menu #8

Navigation Menu #9

Navigation Menu #10

Navigation Menu #11

Navigation Menu #12

Navigation Menu #13

Navigation Menu #14

Navigation Menu #15

Navigation Menu #16

Navigation Menu #17

Navigation Menu #18

Navigation Menu #19

Navigation Menu #20

Navigation Menu #21

Navigation Menu #22

Navigation Menu #23

Navigation Menu #24

Navigation Menu #25

0 မွတ္ခ်က္ေရးရန္:

Post a Comment

အားကစားသတင္း

လအလိုက္ရွာရန္

ေအာင္ေက်ာ္ခိုင္ (နည္းပညာ)

ဒီေလာက္ၾကည့္ထားသည္

သစ္ထူးလြင္ ေန႔စဥ္သတင္း

ၿမိတ္ပုလဲေျမ သတင္း

တင္ခဲ့သမ်ွေခါင္းစဥ္မ်ား