Daha önce bloggerlar için birbirinden güzel yatay menüleri blog okulunda yayınlamıştık.Şimdi ise; 25 adet navigasyonlu dikey menü kodlarını sizlerle paylaşıp, temanıza uygun olanı blogunuza ekleme fırsatını sizlere sunuyoruz.Navigasyonlu Dikey Menüleri kenar çubuğunuza ekleyip blogunuza orjinal site havası verebilirsiniz.
Navigasyonlu Dikey Menüyü Bloguma Nasıl Eklerim?
Aşşağıda yayınladığımız 25 adet navigasyonlu dikey menülerden eklemek istediğinizin altında iki adet kod göreceksiniz.
1-CSS
2-Html
Kumanda Paneli> Tasarım> Htmlyi Düzenle yolunu takip edip widget şablonlarını genişlet kutucuğunu işaretliyoruz.Kodlar içierisinde  Ctrl+F yardımı ile ]]></b:skin> kodunu buluyoruz, seçtiğiniz navigasyonlu dikey menüye ait CSS kodunu bulduğunuz  ]]></b:skin> kodundan önceki satıra yapıştırıp şablonumuzu kaydediyoruz.CSS kodunu ekledikten sonra Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip edip seçtiğimiz navigasyonlu menüye ait html kodunu açılan gadgetimizin içine yapıştırıp kaydediyoruz.
Linklerimizi HTML kısmındaki kodlara ekliyeceğiz;

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

yukarıdaki HTML kodu içerisinde mavi renkle yazdığımız yere, yazıya ait linklerimizi koyuyoruz.
Örnek:#1 yerine http://blogokulu.blogspot.com/ gibi.
kırmızı renkle yazdığımız yere menüde görünmesini istediğiniz ismi yazıyorsunuz.
Örnek:Link 1 yerine Blog Okulu gibi.
Not:Menü genişliklerini CSS kodları içerisinde bulunan width:200px değerini değiştirerek ayarlayabilirsiniz.

Navigasyonlu Dikey Menü #1

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

Navigasyonlu Dikey Menü #2

CSS Kodu:
#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/AVvXsEgTYeaT3FbeWRodMEctrFbsJ751CdS1e0Cshy6V-IMv5HpkNkvDKtU3pG8QS8D3tldzUCbuqCp_qAADY-d1bJZ0ScvECemmhL2t4odOji1vPjyap4BaJs55ctl_hg6-JfyWDFbmYtWTPCM/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/AVvXsEgTYeaT3FbeWRodMEctrFbsJ751CdS1e0Cshy6V-IMv5HpkNkvDKtU3pG8QS8D3tldzUCbuqCp_qAADY-d1bJZ0ScvECemmhL2t4odOji1vPjyap4BaJs55ctl_hg6-JfyWDFbmYtWTPCM/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }
HTML Kodu:
<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>

Navigasyonlu Dikey Menü #3

CSS Kodu:
#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/AVvXsEiFOu9NRpgZHuEtjU3VCan-h4vRzRt8VhMMBJuLScXtkYEkMmsMIVHcEUz4nPUvIoh_Owq37K18Y2xU4RoAiI7-fo0mxTVl3tupZ_9nAcN6yewTM7Mdsnb86yaj6OWkcbtDvuRFq7Ym-7A/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFOu9NRpgZHuEtjU3VCan-h4vRzRt8VhMMBJuLScXtkYEkMmsMIVHcEUz4nPUvIoh_Owq37K18Y2xU4RoAiI7-fo0mxTVl3tupZ_9nAcN6yewTM7Mdsnb86yaj6OWkcbtDvuRFq7Ym-7A/s800/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }
HTML Kodu:
<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>

Navigasyonlu Dikey Menü #4

CSS Kodu:
#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/AVvXsEiJge3XHcNb-hhsTGjAS4nes9QjY69-hwleDqpXUO70pUc_K6uhYo6xlgW8ioGRVR3xkxZWv6DxnyvXfdH1W8-GGRCNSeSp9Fh6E5q3nhHaQ-m8PYD-d0JnK40SsZnb23lEfG1L04bUDmo/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/AVvXsEiJge3XHcNb-hhsTGjAS4nes9QjY69-hwleDqpXUO70pUc_K6uhYo6xlgW8ioGRVR3xkxZWv6DxnyvXfdH1W8-GGRCNSeSp9Fh6E5q3nhHaQ-m8PYD-d0JnK40SsZnb23lEfG1L04bUDmo/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Kodu:
<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>

Navigasyonlu Dikey Menü #5

CSS Kodu:
#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/AVvXsEgRXmGccGY0cwJp-pmxiyIvdrCIEfHEUas57-loOdan08oDqlN11SOH-pK_RaIQ-Qq_zhA64xfUuLpxX2N81pK-41pzqp_-HG5MkuNDMkRRJGwrA24eu7I7opj4JASXfdid1IZ15yVVTfA/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/AVvXsEgRXmGccGY0cwJp-pmxiyIvdrCIEfHEUas57-loOdan08oDqlN11SOH-pK_RaIQ-Qq_zhA64xfUuLpxX2N81pK-41pzqp_-HG5MkuNDMkRRJGwrA24eu7I7opj4JASXfdid1IZ15yVVTfA/s800/menu14.gif); padding: 8px 0 0 10px; }
HTML Kodu:
<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>

Navigasyonlu Dikey Menü #6

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

Navigasyonlu Dikey Menü #7

CSS Kodu:
#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/AVvXsEhvAKmMH7qMkvvhJgGmvNkBju5TWdmErU505VZhn6p6jAF7HAuPZ2mS_T8QSGLXDNO7gcCM3g5WbTK-INlUetQAGWvJFYe4yDPz-tcP0FYCQ4IAF-J5cgBIzHxIUyLooAkJ8T7X3hmtU-U/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/AVvXsEhvAKmMH7qMkvvhJgGmvNkBju5TWdmErU505VZhn6p6jAF7HAuPZ2mS_T8QSGLXDNO7gcCM3g5WbTK-INlUetQAGWvJFYe4yDPz-tcP0FYCQ4IAF-J5cgBIzHxIUyLooAkJ8T7X3hmtU-U/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/AVvXsEhvAKmMH7qMkvvhJgGmvNkBju5TWdmErU505VZhn6p6jAF7HAuPZ2mS_T8QSGLXDNO7gcCM3g5WbTK-INlUetQAGWvJFYe4yDPz-tcP0FYCQ4IAF-J5cgBIzHxIUyLooAkJ8T7X3hmtU-U/s800/menu2.gif) 0 -64px; padding: 8px 0 0 10px; }
HTML Kodu:
<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>

Navigasyonlu Dikey Menü #8

CSS Kodu:
#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/AVvXsEh482zgOdo0tolIEl_57ENf82vN07gQTaQ4ICQl3kpSrodD2Dwp7uTl-c2gV6XcengyPxWJPxt9gk1zgiXhgPgW5Ckran3dYDhPL7DZG2qpeOv4FA-CNAvS8rm7dPFV3EmbRgPO9G4llBE/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/AVvXsEh482zgOdo0tolIEl_57ENf82vN07gQTaQ4ICQl3kpSrodD2Dwp7uTl-c2gV6XcengyPxWJPxt9gk1zgiXhgPgW5Ckran3dYDhPL7DZG2qpeOv4FA-CNAvS8rm7dPFV3EmbRgPO9G4llBE/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/AVvXsEh482zgOdo0tolIEl_57ENf82vN07gQTaQ4ICQl3kpSrodD2Dwp7uTl-c2gV6XcengyPxWJPxt9gk1zgiXhgPgW5Ckran3dYDhPL7DZG2qpeOv4FA-CNAvS8rm7dPFV3EmbRgPO9G4llBE/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }
HTML Kodu:
<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>

Navigasyonlu Dikey Menü #9

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

Navigasyonlu Dikey Menü #10

CSS Kodu:
#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/AVvXsEgpEZ2oWsBWaDVs7WUQnJ5Cs8aUSXXto2vNWc_koi-y6-qYZInwdHpNHX7Lyd6mBMaeq_lRNJbtb_SU5IPBv9YuUGHYkQunfAqCuX6C1PbZIUY5j2raDOpKu2nwdTT4cvPhGGAfB3HhhVU/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpEZ2oWsBWaDVs7WUQnJ5Cs8aUSXXto2vNWc_koi-y6-qYZInwdHpNHX7Lyd6mBMaeq_lRNJbtb_SU5IPBv9YuUGHYkQunfAqCuX6C1PbZIUY5j2raDOpKu2nwdTT4cvPhGGAfB3HhhVU/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Kodu:
<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>

Navigasyonlu Dikey Menü #11

CSS Kodu:
#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/AVvXsEhroAnHV5E9cnfEhZLpzfje72e9dTbbbNtqmmSWlTmrxyNVRkU7W4_xg-AmNNwE0v2_RpbxZy6bIz-BIPhz1rzbzWGgL1fz_x5hNKJre2R64eVdFPt-cEWC95ar1RDNXBMo1jy2vHdB1y4/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/AVvXsEhroAnHV5E9cnfEhZLpzfje72e9dTbbbNtqmmSWlTmrxyNVRkU7W4_xg-AmNNwE0v2_RpbxZy6bIz-BIPhz1rzbzWGgL1fz_x5hNKJre2R64eVdFPt-cEWC95ar1RDNXBMo1jy2vHdB1y4/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/AVvXsEhroAnHV5E9cnfEhZLpzfje72e9dTbbbNtqmmSWlTmrxyNVRkU7W4_xg-AmNNwE0v2_RpbxZy6bIz-BIPhz1rzbzWGgL1fz_x5hNKJre2R64eVdFPt-cEWC95ar1RDNXBMo1jy2vHdB1y4/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }
HTML Kodu:
<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>

Navigasyonlu Dikey Menü #12

CSS Kodu:

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

Navigasyonlu Dikey Menü #13

CSS Kodu:
#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/AVvXsEgl64qW8EVcrnf_5m93YGiYn84ribsBMfxRaJjuP0Al-RNrtSJy0DdpDV6erokKdr1qEeRgnSUnNdg_M0bqr9REsa-PfnHohzNGKXHni8pujbYt2OBQitTt-hOemNnQn5tODUJ6lUBEEo4/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/AVvXsEgl64qW8EVcrnf_5m93YGiYn84ribsBMfxRaJjuP0Al-RNrtSJy0DdpDV6erokKdr1qEeRgnSUnNdg_M0bqr9REsa-PfnHohzNGKXHni8pujbYt2OBQitTt-hOemNnQn5tODUJ6lUBEEo4/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/AVvXsEgl64qW8EVcrnf_5m93YGiYn84ribsBMfxRaJjuP0Al-RNrtSJy0DdpDV6erokKdr1qEeRgnSUnNdg_M0bqr9REsa-PfnHohzNGKXHni8pujbYt2OBQitTt-hOemNnQn5tODUJ6lUBEEo4/s800/menu8.gif) 0 -64px; padding: 8px 0 0 25px; }
HTML Kodu:
<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>

Navigasyonlu Dikey Menü #14

CSS Kodu:

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

Navigasyonlu Dikey Menü #15

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

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

Navigasyonlu Dikey Menü #16

CSS Kodu:
#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 Kodu:
<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>

Navigasyonlu Dikey Menü #17

CSS Kodu:
#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/AVvXsEg6EZeQeu8ARxAK1bgrZqFcAjXkYbsnh8Mn-2N5HIvQ1OUzf33bdoADow2S7rfL-Kzq_HU-I7HbUSIp485etlH2WA526oOHqHFqwhKAl8j7d7LTDY12T9wv2-gZmcj3FvaXEhrU4BfG9Ms/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6EZeQeu8ARxAK1bgrZqFcAjXkYbsnh8Mn-2N5HIvQ1OUzf33bdoADow2S7rfL-Kzq_HU-I7HbUSIp485etlH2WA526oOHqHFqwhKAl8j7d7LTDY12T9wv2-gZmcj3FvaXEhrU4BfG9Ms/s800/menu3.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Kodu:
<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>

Navigasyonlu Dikey Menü #18

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

Navigasyonlu Dikey Menü #19

CSS Kodu:
#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 Kodu:
<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>

Navigasyonlu Dikey Menü #20

CSS Kodu:
#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/AVvXsEg-gI8TLM2qSPlIFER4Y29fSPfYT_hsS3QSJQ1Myg-FcvCz8I5vU_OFsSLmi2ylNVhwnKYryoRchREz4W6SyjrAQivQPCKGM0gIZNevCqrJWnFT31jwJtxYc18_1oxzgt_ZUkaDkg3Dy-E/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/AVvXsEg-gI8TLM2qSPlIFER4Y29fSPfYT_hsS3QSJQ1Myg-FcvCz8I5vU_OFsSLmi2ylNVhwnKYryoRchREz4W6SyjrAQivQPCKGM0gIZNevCqrJWnFT31jwJtxYc18_1oxzgt_ZUkaDkg3Dy-E/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/AVvXsEg-gI8TLM2qSPlIFER4Y29fSPfYT_hsS3QSJQ1Myg-FcvCz8I5vU_OFsSLmi2ylNVhwnKYryoRchREz4W6SyjrAQivQPCKGM0gIZNevCqrJWnFT31jwJtxYc18_1oxzgt_ZUkaDkg3Dy-E/s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; }
HTML Kodu:
<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>

Navigasyonlu Dikey Menü #21

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

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

Navigasyonlu Dikey Menü #22

CSS Kodu:
#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/AVvXsEiXlRFaVysVRzw3Cuc9grPuFtAYO1efk0ZIg3pHE_1cQHiQFWBv1EEWb30INanDS4_u7BrmofhgRcOaUt5Tg9b2a0puJpiueU8TFLfh7k6b5KnRuddx0AWX8XCwdSuXc098D2-rmncQloM/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/AVvXsEiXlRFaVysVRzw3Cuc9grPuFtAYO1efk0ZIg3pHE_1cQHiQFWBv1EEWb30INanDS4_u7BrmofhgRcOaUt5Tg9b2a0puJpiueU8TFLfh7k6b5KnRuddx0AWX8XCwdSuXc098D2-rmncQloM/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/AVvXsEiXlRFaVysVRzw3Cuc9grPuFtAYO1efk0ZIg3pHE_1cQHiQFWBv1EEWb30INanDS4_u7BrmofhgRcOaUt5Tg9b2a0puJpiueU8TFLfh7k6b5KnRuddx0AWX8XCwdSuXc098D2-rmncQloM/s800/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; }
HTML Kodu:


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

Navigasyonlu Dikey Menü #23

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

Navigasyonlu Dikey Menü #24

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

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

Navigasyonlu Dikey Menü #25

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

Blogunuzun kenar çubuğu (sidebar) için şık bir şekilde tasarlanmış olan dikey menü kutusunu, burada yaptığımız anlatım sayesinde blogunuzun temasına uygun renklerle değiştirip kendinize göre tasarlayabilir ve blogunuza ekliyebilirsiniz.Dikey menü kutusunu blogunuza eklemek için;
Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip edip aşşağıdaki kodu açılan gadgetimizin içine yapıştırıp kaydettiğimizde dikey menü kutusu blogumuza eklenmiş olacak.

<style type="text/css">

/* Made By blogokulu.blogspot.com */

#ddblueblockmenu{
border: 1px solid #f2890c; /*Main Border Color */
border-bottom-width: 0;
width: 100%;
}

#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

#ddblueblockmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%; /*94% minus all left/right paddings and margins*/
text-decoration: none;
color: #ffffff; /* Menu Font Color */
background-color: #83b617; /*Menu background Color */
border-bottom: 1px solid #FFFFFF; /*Bottom border color */
border-left: 7px solid #4d6b0c; /*Left border color */
list-style-type:none; 
}

* html #ddblueblockmenu a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%; /*94% minus all left/right paddings and margins*/
}

#ddblueblockmenu a:hover {
background-color: #f2890c; /*Menu background Color On Hover*/
border-left-color: #FDB600; /*Left border color On Hover*/
}

#ddblueblockmenu div.menutitle{
color: #ffffff; /* Title Font Color */
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #f2890c;  /*Menu Tite Background Color*/
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
/* Made By AllBlogTools.com */
</style>

<div id="ddblueblockmenu">

<div class="menutitle">Başlık</div>
<ul>
<a href="http://blogokulu.blogspot.com/">Ana Sayfa</a>
<a href="http://blogokulu.blogspot.com/search/label/blogger%20widget">Blogger Widgets</a>
<a href="http://blogokulu.blogspot.com/search/label/blogger%20temalar%C4%B1">Blogger Temaları</a>
<a href="http://blogokulu.blogspot.com/"><b>Blog Okulu</b></a>
<a href="http://blogokulu.blogspot.com/search/label/sitene%20ekle">Blogger Eklentileri</a>
<a href="#">Ayarlar</a>
</ul></div><font size="1">Menu By <a
href="http://www.blogokulu.org">BlogOkulu</a
href="http:></font>

Kod içerisinde  
mavi renkle yazdığımız yerler, menüde görünecek metinler,
kırmızılar ise menüde görünen metinlere ait linklerdir.
Dikey Menü Kutusunun Renklerini Değiştirip temanıza uygun hale getirmek isterseniz aşşağıdaki resimde oklarla ,kod içerisinde yapacağınız değişikliklerin yerleri ve isimleri belirtilmiştir.Ayrıca renk kodlarını burdan bulabilirsiniz.