25 “Vertical” Navigation Menus For Blogger – CSS-HTML Tab Menus

25 Navigation Menus Collection! After the release of 30+ Horizontal Navigation Menus, we head forward to a beautiful collection of some of the best looking vertical navigation menus that will put soul to anyone’s weblog or website! I have modified the codes made by Christopher and Highdots and have made them compatible with Blogger. I hope this collection will be of interest to most of you simply because these navigation menu tabs can easily be installed, customized and multiplied! I hope it will be of great help to new designers :>

How To Add A Vertical Navigation CSS Menu To Blogger?

Well the process is as simply as it can be. Simply follow these steps carefully,

Go To Blogger > Layout > Edit HTML
Back-up your template

All Navigation Menus below uses two pieces of codes. One is The CSS code which is responsible for the look and feel of the menus and the second is the HTML code which is responsible for positioning the menus. So lets know where to add each code!

3. Paste the CSS code for your selected Menu just above ]]></b:skin>

4. For the HTML code there can be two positions either your right sidebar or left sidebar. Depends how many columns you have.

If you have a right sidebar then paste the HTML code just below <div id='sidebar-wrapper'> or this <div id='sidebar-wrapper-right'>
If you have a left sidebar then paste the HTML code just below <div id='sidebar-wrapper-left'>

Note:- Since most templates use different coding therefore if you could not find the above codes then don’t worry simply share your blog URL in the comment box and I will view your template coding and will tell you instantly which code to search for!

5. Finally save your template and see a beautiful Navigation Menu hanging on your sidebar :D

Editing The Links In The Navigation Menu

To change the Tab Menu Links and Titles, simply edit this bolded part of the HTML code,

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

Replace #1, #2, #3 etc with your Page Links/URL and replace Link1, Link2, Link3 etc with your Page Titles. If you wish to add or delete a tab then simply add or delete this line from the HTML code,

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

Live Demo

For Live Demo of Other Navigation Menus Simply use our HTML Editor and Copy and Paste the CSS and HTML code at right areas and then start playing with the code :>>

See Demos With MBT HTML Editor!

Navigation Menu #1

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

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/AVvXsEgPSqsC4tuPlngkqV8gPDHNG-CiukMW6zrOTHx40Qxoh6UIw3VIcLp5EbcXlUocx-9sSl3phSWyXuld5pZWvKvs8GZZSEWTbK5eBrrxbZ-nk3XqFZNdVbbiN9ZowhgUW2Co9oh9j454GP8/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/AVvXsEgPSqsC4tuPlngkqV8gPDHNG-CiukMW6zrOTHx40Qxoh6UIw3VIcLp5EbcXlUocx-9sSl3phSWyXuld5pZWvKvs8GZZSEWTbK5eBrrxbZ-nk3XqFZNdVbbiN9ZowhgUW2Co9oh9j454GP8/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

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

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/AVvXsEh1Efj2LGVpkL5PyqH4kah6u0UNpsW8lIKItBtmekpqzuROlK3zeSXolozO3GykMzUadGrtCe22kqjycNuEZeC3Ja_tVEslPDQxELKrFa5SgZL0eOLYffu23bGYHjWN_1Z9Hs-gnvdxrpk/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/AVvXsEh1Efj2LGVpkL5PyqH4kah6u0UNpsW8lIKItBtmekpqzuROlK3zeSXolozO3GykMzUadGrtCe22kqjycNuEZeC3Ja_tVEslPDQxELKrFa5SgZL0eOLYffu23bGYHjWN_1Z9Hs-gnvdxrpk/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

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/AVvXsEgj8H1oa24BN0YCoHPlJFfGyCt9ZnxvhGawtu8k2-zg1eD8uc6ifwbWQS05DvvSNTmfy1LGBJEYDWIoTuWBRamf-FLXo-4o2rJnTThrVrHVRohHnR6x3KjgT6LeeI7P4p7LMr-pC5IsHk0/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/AVvXsEgj8H1oa24BN0YCoHPlJFfGyCt9ZnxvhGawtu8k2-zg1eD8uc6ifwbWQS05DvvSNTmfy1LGBJEYDWIoTuWBRamf-FLXo-4o2rJnTThrVrHVRohHnR6x3KjgT6LeeI7P4p7LMr-pC5IsHk0/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

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/AVvXsEh2Il5BcbBDhK0-9NW63gC7NKt8kSV4WKdwhc_X2SA-bF-oHGbw4CLLjRrjaQ1WS3SwK5qWFNDv2gQk00n1hcVc-2ckrdI-AGj36levXxqzA-CMFZuhlG_Vp34AZB0zUTl3Q2GkErAje6E/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Il5BcbBDhK0-9NW63gC7NKt8kSV4WKdwhc_X2SA-bF-oHGbw4CLLjRrjaQ1WS3SwK5qWFNDv2gQk00n1hcVc-2ckrdI-AGj36levXxqzA-CMFZuhlG_Vp34AZB0zUTl3Q2GkErAje6E/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

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/AVvXsEgrmLqHSo6-0xzSVYs5Z8ZACNbTOy3t_Ji2Yl20PX9qoAJ9qeuHxO5ky3lKEb3qFBYR-uefcZxIuX4_sVOhM_AU0tB-vUNVnVJRQ0K6IfbpIpehuOKVaMTsuaOAsP54SosCsqtpXZOlFAc/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/AVvXsEgrmLqHSo6-0xzSVYs5Z8ZACNbTOy3t_Ji2Yl20PX9qoAJ9qeuHxO5ky3lKEb3qFBYR-uefcZxIuX4_sVOhM_AU0tB-vUNVnVJRQ0K6IfbpIpehuOKVaMTsuaOAsP54SosCsqtpXZOlFAc/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/AVvXsEgrmLqHSo6-0xzSVYs5Z8ZACNbTOy3t_Ji2Yl20PX9qoAJ9qeuHxO5ky3lKEb3qFBYR-uefcZxIuX4_sVOhM_AU0tB-vUNVnVJRQ0K6IfbpIpehuOKVaMTsuaOAsP54SosCsqtpXZOlFAc/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

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/AVvXsEglgS-lDN-dfqKeD0liCFnajOSez2uZmvziYvGuzKGvVjHZBN9ykqHstgy35AhM8vnga_h6wOMBnj-J5g8iH3Fr80GKwdON7vMoJki9gewnAqSX4n9GzdvE1j0YXWSgFixnXXWwzaxVT2c/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/AVvXsEglgS-lDN-dfqKeD0liCFnajOSez2uZmvziYvGuzKGvVjHZBN9ykqHstgy35AhM8vnga_h6wOMBnj-J5g8iH3Fr80GKwdON7vMoJki9gewnAqSX4n9GzdvE1j0YXWSgFixnXXWwzaxVT2c/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/AVvXsEglgS-lDN-dfqKeD0liCFnajOSez2uZmvziYvGuzKGvVjHZBN9ykqHstgy35AhM8vnga_h6wOMBnj-J5g8iH3Fr80GKwdON7vMoJki9gewnAqSX4n9GzdvE1j0YXWSgFixnXXWwzaxVT2c/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

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

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

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/AVvXsEiUrMvmzd9syXuITx-_0KSO57tvIEDNbx8WeuEZrNgZudvUjXJ7UVavuHs0ZVKU80EUCAp7-SPA8c6VR0VZIBe4-KdB8OGeZk9YgJX7612FtnlvEz1IdmtDV-LzLhCzg52j18-8dKGJKGA/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/AVvXsEiUrMvmzd9syXuITx-_0KSO57tvIEDNbx8WeuEZrNgZudvUjXJ7UVavuHs0ZVKU80EUCAp7-SPA8c6VR0VZIBe4-KdB8OGeZk9YgJX7612FtnlvEz1IdmtDV-LzLhCzg52j18-8dKGJKGA/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/AVvXsEiUrMvmzd9syXuITx-_0KSO57tvIEDNbx8WeuEZrNgZudvUjXJ7UVavuHs0ZVKU80EUCAp7-SPA8c6VR0VZIBe4-KdB8OGeZk9YgJX7612FtnlvEz1IdmtDV-LzLhCzg52j18-8dKGJKGA/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

Navigation-Menu-With-No-image-used

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 Menu Tabs 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/AVvXsEj5Kc1ICbqhXDkUQS_LdAiuijhlEG-wzFR1IhFj5ThHtShzw9mhuowBJ8eOrIsijMQJcRQ-fxHTpyKDJaJ9cXYsYHuGd82Uoz4cwiOpB0RGQ28CSKdvffc_2W4_HZkhapLw1LinKpexTaY/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/AVvXsEj5Kc1ICbqhXDkUQS_LdAiuijhlEG-wzFR1IhFj5ThHtShzw9mhuowBJ8eOrIsijMQJcRQ-fxHTpyKDJaJ9cXYsYHuGd82Uoz4cwiOpB0RGQ28CSKdvffc_2W4_HZkhapLw1LinKpexTaY/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/AVvXsEj5Kc1ICbqhXDkUQS_LdAiuijhlEG-wzFR1IhFj5ThHtShzw9mhuowBJ8eOrIsijMQJcRQ-fxHTpyKDJaJ9cXYsYHuGd82Uoz4cwiOpB0RGQ28CSKdvffc_2W4_HZkhapLw1LinKpexTaY/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 Menu Tabs 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/AVvXsEiA-yC2ufE7q8efEAXnKCVvnz4HshjvLfyWy_Enca80Ge4X-7UAIPR3o4YsazY1iQa3nl1jlOypL5lnysNoCEU3rUrACzesRq7-Ee9Atg_h5igVp2PjH30pUFSrUG7uDHX8MRoNu9sK5Rk/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA-yC2ufE7q8efEAXnKCVvnz4HshjvLfyWy_Enca80Ge4X-7UAIPR3o4YsazY1iQa3nl1jlOypL5lnysNoCEU3rUrACzesRq7-Ee9Atg_h5igVp2PjH30pUFSrUG7uDHX8MRoNu9sK5Rk/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 Menu Tabs 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/AVvXsEglNjqXZI6ZtJYjDon_MTfw1WcI74o7bXiakVjjfqONyKSZFBAxtVIDo9n09b2VU5vEhpiCDCnNRKnQdBUxcrBwNL6PbStXzUGJILUMSI7pipF7JOh1d1jMtLYcy7bvRwkv3z6gYqT1pkc/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglNjqXZI6ZtJYjDon_MTfw1WcI74o7bXiakVjjfqONyKSZFBAxtVIDo9n09b2VU5vEhpiCDCnNRKnQdBUxcrBwNL6PbStXzUGJILUMSI7pipF7JOh1d1jMtLYcy7bvRwkv3z6gYqT1pkc/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 Menu Tabs 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 Menu Tabs 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/AVvXsEgTMAlQX0mmA3fMH7wzoasf7k0IYyN08OTOBP3AXQOxohHtchQjBcXLIoUN-mZJ8gCnTVnRdp7DfYDLr4wl5k_Vk4_M31FdSO-Kp2eeaNrfe1eRd5fWO3sQCc2imVvadVOp2B5IERUq3sY/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTMAlQX0mmA3fMH7wzoasf7k0IYyN08OTOBP3AXQOxohHtchQjBcXLIoUN-mZJ8gCnTVnRdp7DfYDLr4wl5k_Vk4_M31FdSO-Kp2eeaNrfe1eRd5fWO3sQCc2imVvadVOp2B5IERUq3sY/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 Menu Tabs 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/AVvXsEi5d-eEbNPyuHSA-2HMBUQ6Io8PEWmVMNLAKyqvI9mXVO6QuDEfOYC1YiVpztyrbvf5VeqMEhRnD9GSrHJkiDQVeBdyOjQzvA6xjQjNBoQYvyKqwxbVCpl9ChhCbceTwtmWNHLjSlnGfAw/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5d-eEbNPyuHSA-2HMBUQ6Io8PEWmVMNLAKyqvI9mXVO6QuDEfOYC1YiVpztyrbvf5VeqMEhRnD9GSrHJkiDQVeBdyOjQzvA6xjQjNBoQYvyKqwxbVCpl9ChhCbceTwtmWNHLjSlnGfAw/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 Menu Tabs 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 Menu Tabs 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/AVvXsEixMvNwFqIEqCzOC2GHosGMlvlJrJGNxYk1dW7itF1DSBACzNdi_PqbwjzroYgMlxi2FcLOmFvHUb3xBELFoNKE9NKK4zlNntvWDRBi5siRJK3b61dXiTKuy9c8BSti5hAwwhf4I00eYeQ/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/AVvXsEixMvNwFqIEqCzOC2GHosGMlvlJrJGNxYk1dW7itF1DSBACzNdi_PqbwjzroYgMlxi2FcLOmFvHUb3xBELFoNKE9NKK4zlNntvWDRBi5siRJK3b61dXiTKuy9c8BSti5hAwwhf4I00eYeQ/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/AVvXsEixMvNwFqIEqCzOC2GHosGMlvlJrJGNxYk1dW7itF1DSBACzNdi_PqbwjzroYgMlxi2FcLOmFvHUb3xBELFoNKE9NKK4zlNntvWDRBi5siRJK3b61dXiTKuy9c8BSti5hAwwhf4I00eYeQ/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 Menu Tabs 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/AVvXsEjE63JT_0P_PdXjo2Cc45-u7qncy4OdDpoxceQUI1MAxFf4e8SBXvaPM510-1IyJPQgAGJznKyACv795ROcKDRWuUazLRUg_a0dq3n_Q7Lcos0zPVX6Bkk-_aYxSREruXyBadLlMhCW8Dg/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE63JT_0P_PdXjo2Cc45-u7qncy4OdDpoxceQUI1MAxFf4e8SBXvaPM510-1IyJPQgAGJznKyACv795ROcKDRWuUazLRUg_a0dq3n_Q7Lcos0zPVX6Bkk-_aYxSREruXyBadLlMhCW8Dg/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 Menu Tabs 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/AVvXsEjNstnBD82ZDeRjGm61FasCqQmjiaTkm8El0SE3mkVj4KKzAq7cbZkgwXK4GA1JorZDom6K1OJbCRfi3G0kHkduMwMGu-eM0YmygKTFlQnQsTSpJtYDE1fiL2wsBdgQxzuGeAoysQ-FlQk/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/AVvXsEjNstnBD82ZDeRjGm61FasCqQmjiaTkm8El0SE3mkVj4KKzAq7cbZkgwXK4GA1JorZDom6K1OJbCRfi3G0kHkduMwMGu-eM0YmygKTFlQnQsTSpJtYDE1fiL2wsBdgQxzuGeAoysQ-FlQk/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/AVvXsEjNstnBD82ZDeRjGm61FasCqQmjiaTkm8El0SE3mkVj4KKzAq7cbZkgwXK4GA1JorZDom6K1OJbCRfi3G0kHkduMwMGu-eM0YmygKTFlQnQsTSpJtYDE1fiL2wsBdgQxzuGeAoysQ-FlQk/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 Menu Tabs 24

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

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

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/AVvXsEiugREhqJUAw4TXnw1QT-tnZELdL68ZELfDEG3TuEvMCsg-m1tqE1eP2E53fu5Qc07zpzuSMRtoyOhtMo-ugGGZy0Giy4nh98KNa9ZkFoy0bjAB5ekCOcaWFmHXgcm0t3uwam4znr7Ug2E/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiugREhqJUAw4TXnw1QT-tnZELdL68ZELfDEG3TuEvMCsg-m1tqE1eP2E53fu5Qc07zpzuSMRtoyOhtMo-ugGGZy0Giy4nh98KNa9ZkFoy0bjAB5ekCOcaWFmHXgcm0t3uwam4znr7Ug2E/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>

That’s All!

Hope you have enjoyed the post. Feel free to ask any question related to these navigation menus. I am happy I fulfilled my promise of publishing this post :>

Pin it

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 1/24/2010 Blogger Resources , CSS and HTMLTricks

52 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

UnknownJan 24, 2010, 6:17:00 PM
amazing work no word for it
ReplyDelete
Replies
aJan 24, 2010, 7:24:00 PM
Cool! But not much useful.
ReplyDelete
Replies
NandanJan 24, 2010, 10:53:00 PM
Hey Mohammad you are master in css
ReplyDelete
Replies
SreejeshJan 25, 2010, 5:05:00 AM
Anup, there are so many who find this useful:)

Hi, Mohd. I appreciate you for finding time for all this in your busy schedule!!!

Could you please have a look at this --->>
http://bloggerstop.net/2009/03/sliding-side-menu-for-blogger-blogs.html

You can make it better I hope....
can u do this for me in ur style?
ReplyDelete
Replies
SreejeshJan 25, 2010, 10:39:00 AM
Mohd, I have yahoo media player coded in my template and it will find all the links with extension .mp3 and stream it directly to play in the page to I've added ur code and it has become like this..

http://www.123tunestore.com/2010/01/play-1-link-2-link-3-link-4-link5.html

But the text is overlaping!!!! what to do for this??
ReplyDelete
Replies
sudharsan @ technoskillonlineJan 25, 2010, 5:47:00 PM
Nice article
but i like first 3 of them very much....
ReplyDelete
Replies
Beben KobenJan 26, 2010, 12:41:00 AM
so diligent...^_^
ReplyDelete
Replies
Mohammad Mustafa AhmedzaiJan 26, 2010, 8:51:00 PM
I am glad most of you found it useful!

@Anup

I still respect your viewpoint. I will try to present more valuable articles in future. Thanks for being straight forward :>>

@Sreejesh

Wow they look so beautiful in your template! :> Dude kindly share. As far as overlapping issue is concerned there is only one solution and that is that you must integrate the code inside your template (both CSS and HTML) The only way is to add it to your sidebar rather a post because I have tried a lot to solve this disalignment issue but when I would try it would look fine in one browser but distorted in other. Si I finally gave up and came out with the only solution as mentioned in the post above (i.e adding it to sidebar)

I just visited that slide menu and it is indeed a great one created by dynamic drive and introduced by Sai. But the only think that I did not like was the heavy use of JavaScript. Dude Search Engines wont crawl the links integrated into that menu and wont even find your template seo friendly. Do you still want me to provide you with a new style for that menu? :>
ReplyDelete
Replies
SreejeshJan 27, 2010, 6:05:00 AM
Yes, I too felt that it is not so seo friendly and delys loading time.. so i'll forget abt tat.

I wanted to ask you one thing about Intense Debate Comment box (already installed in my page), would you recommend adding it in, is that good for the page or negative?
ReplyDelete
Replies
SreejeshJan 27, 2010, 6:54:00 AM
I used a different one and i think it worked!!

http://www.123tunestore.com/2010/01/aadhavan-tamil-movie-songs.html

but i need a play button!!
ReplyDelete
Replies
Beben KobenJan 27, 2010, 3:32:00 PM
sreejesh owner bloggerstop???
hmmm...played come here too...hihihihi
ReplyDelete
Replies
Ralph ButtigiegJan 27, 2010, 4:59:00 PM
G'day,

Have you considered drop down menus for blogger? Theres several websites such as: http://purecssmenu.com/ which claim to let you produce them but I'm unsure how to add them to blogger.

ta

Ralph
ReplyDelete
Replies
Mohammad Mustafa AhmedzaiJan 28, 2010, 12:28:00 AM
@sreejesh

No one will recommend the intense debate comment system or any other just for a simple reason "Multiplies your commenting loading and posting time by 3/4th"

@Ralph

What that website can do has already been presented to you in this post and even in far better way :>
Those websites are good for those who have some command over CSS and HTML but newbie will always find them complicated.
ReplyDelete
Replies
Manisha.Rautela.BishtJan 28, 2010, 1:21:00 PM
Hi Mohd...
how are you ? long time .This is really amazing...thanks for sharing ..
always best ...
tc
Manisha
ReplyDelete
Replies
KunalJan 28, 2010, 10:02:00 PM
Congrats. Great work.

I am planning to use it on my blog.
ReplyDelete
Replies
Mohammad Mustafa AhmedzaiJan 29, 2010, 12:48:00 PM
@Manisha

I am fine Manisha. Thanks for your love and care :> And thanks for the appreciation! How are you doing?

@kunal

You welcome pal!
ReplyDelete
Replies
NeoJan 29, 2010, 2:47:00 PM
Nice looking menus...I will implement them in my blogs but my blog is having a red based theme and here I don't find any red menu...Anyway thanks

TC
ReplyDelete
Replies
Manisha.Rautela.BishtJan 29, 2010, 3:10:00 PM
Mohd I was traveling Egypt past few days just returned and as usual visited my fav website to find some new great post here... hope to implement them soon in my websites after the traveling hangover gets over ))
how about you ...!! how Univ,studies,etc etc going ...
KIT (keep in touch )...TC
And u know we are following you ........>>>>
Best wishes
Manisha
ReplyDelete
Replies
SreejeshJan 30, 2010, 11:52:00 AM
Mohd, what about the "back to botton" button??
ReplyDelete
Replies
Mohammad Mustafa AhmedzaiJan 30, 2010, 5:49:00 PM
@Manisha

I am sure you guys had great fun traveling. Wishing you the same joy in future. I am enjoying uni life too :p Things are improving day by day. New and interesting friends but boring teachers lol! I will let you know in detail someday via chat. I am glad you are having a splendid time with your family :> Take care you too.
ReplyDelete
Replies
Aero RiverFeb 3, 2010, 11:22:00 AM
good and attractive works. looking foe tabbed widget. do you have any?
ReplyDelete
Replies
hummFeb 23, 2010, 10:01:00 PM
very nice and clearly described
ReplyDelete
Replies
RobinFeb 24, 2010, 9:19:00 AM
HI Mohammad, it me Robin...Again I am back hahaha
Hope you r fine

I am so sad. This is not working in my template. I cannot find the html codes in my blog template.
Help me dear.
ReplyDelete
Replies
Mohammad Mustafa AhmedzaiFeb 24, 2010, 4:47:00 PM
@Robin

In your template search for this code instead,
<div id='sidebars'>

and paste the HTML code for your preferred menu just below <div id='sidebars'>

Hope that would help.
ReplyDelete
Replies
RobinFeb 25, 2010, 7:42:00 AM
Hi. It worked. But can I ask one thing. I like to relocate the ver.navigation bar. In my blog you can see the "Download Shop" widget. It is the label widget. I like to make the navigation bar below the heading Download shop. Is there any way to do so. It should be looking normally like other sidebar widgets. Can you help me?
ReplyDelete
Replies
Mohammad Mustafa AhmedzaiFeb 28, 2010, 10:42:00 AM
@Robin

Your answer is hidden in this post -> :> http://www.mybloggertricks.com/2010/01/30-horizontal-navigation-menus-for.html
ReplyDelete
Replies
Mohammad Mustafa AhmedzaiMar 30, 2010, 9:43:00 PM
@Iqbal

You are always welcomed here bro. I just visited your blog and simply loved the +/- tree on your sidebar! :>
ReplyDelete
Replies
jackApr 11, 2010, 1:25:00 PM
very2 nice... I like it...
ReplyDelete
Replies
Mohammad Mustafa AhmedzaiMay 20, 2010, 6:40:00 PM
@john.b

Dear search for sidebar-right in your template and add the code there.
ReplyDelete
Replies
Miss BJun 29, 2010, 7:09:00 PM
I have copied and tried your code for Navigation Menu #19 on my blog but it did not work. Would be grateful if you could offer any advice as I dont have < id='sidebar-wrapper-left'> in my code. I will of course then link back to you as your menu are SO beautiful
Cheers in advance http://www.bestofhulme.com
ReplyDelete
Replies
Mohammad Mustafa AhmedzaiJul 2, 2010, 4:28:00 AM
@auntie_biotic
Sorry for delay in answer! :>
Dear find this code instead <div id='right-sidebar'> and add the code just below it.
ReplyDelete
Replies
UnknownSep 13, 2010, 10:07:00 PM
This comment has been removed by the author.
ReplyDelete
Replies
Sherman UnkeferDec 23, 2010, 6:54:00 PM
Whenever i see the post like your’s i feel that there are still helpful people who share information for the help of others, it must be helpful for other’s.
thanx and good job.
ReplyDelete
Replies
Mohammad Mustafa AhmedzaiDec 24, 2010, 3:24:00 AM
@Sherman

I would take it as a really kind complement. thank you brother :)
ReplyDelete
Replies
Tiago HenriquesMar 1, 2011, 3:01:00 AM
Im using the navigation menu #24, and it worked great with the 5 links, but when i tried to add a 6th link, it didn't worked, the link shows, but it's separated of the rest of the menu :/
ReplyDelete
Replies
AnandApr 9, 2011, 4:08:00 PM
Amazing !!
You simply rockk
ReplyDelete
Replies
my reality bitMay 26, 2011, 11:02:00 PM
I added it, it shows up on my page, but how do you then connect the linked pages? It just kind of sits there on my page dead and when I click on it, nothing happens. Thanks so much. Elizabeth
ReplyDelete
Replies
Mohammad Mustafa AhmedzaiMay 27, 2011, 8:38:00 PM
@Elizabeth

I have explained it clearly under this heading in the post above,
Editing The Links In The Navigation Menu
ReplyDelete
Replies
MollyAhmadJun 17, 2011, 3:53:00 PM
hi, i could not follow the instruction cos i dont have the code for right or left sidebar. maybe cos mine is a one column template >.< what should i do?
ReplyDelete
Replies
Melissa IvetteSep 22, 2011, 2:39:00 PM
THIS was EXTREMELY helpful! Thank you!
ReplyDelete
Replies
Let's Wage a War Against Pornography in PakistanOct 19, 2011, 9:42:00 PM
I try it, but i can't succeed to complete this on my blog via blogger, plz help me to implement in my blog, thanks
ReplyDelete
Replies
Aman puniaJan 16, 2012, 6:41:00 PM
Dude U ROCK!!!!!!!!!!!!!!!!
ReplyDelete
Replies
UnknownFeb 26, 2012, 12:06:00 PM
hi, i could not follow the instruction cos i dont have the code for right or left sidebar. maybe cos mine is a one column template >.< what should i do?
ReplyDelete
Replies
AnonymousMar 28, 2012, 9:23:00 AM
Cool navigation menu :)
ReplyDelete
Replies
The Bronx BromberMay 6, 2012, 1:05:00 AM
Hello, I'm new to this and would appreciate your help. I can't seem to find the above required codes in my blog HTML batch. My blog layout has a left and right column with post in middle. The URL is http://thebronxb52bomber.blogspot.com/ and my Email is Ginrosge@yahoo.com. I will like to position a vertical navigation menu on each side (left and right) below the two widgets if possible. Many Thanks
ReplyDelete
Replies
Spotting scopeJul 20, 2012, 9:14:00 PM
Hi, Thank for share. I want lech to my blog: batuan.info

Please!
ReplyDelete
Replies
UnknownFeb 27, 2013, 4:19:00 PM
http://faisal-testing.blogspot.com/

This is my blogg plz tell which code i should find for the menue in the page coding ?????
ReplyDelete
Replies
AnonymousDec 24, 2013, 8:44:00 PM
This comment has been removed by the author.
ReplyDelete
Replies
UnknownMar 26, 2014, 6:33:00 PM
Hi. You have great designs for your navigation menu templates.

But you would be so kind to share the codes for the navigation menu templates #2, #3, #11, #23.

I would really appreciate it if you can send the codes at my email. ronmoises0904@gmail.com

Thank you very much in advance! :)
ReplyDelete
Replies
UnknownDec 26, 2014, 9:07:00 PM
Interesting info , it's just that I have a question .
How to set the size of its length .. ?
thank you ..
ReplyDelete
Replies
Niki M.Jun 2, 2017, 8:12:00 PM
This comment has been removed by the author.
ReplyDelete
Replies

Add comment

Subscribe to: Post Comments ( Atom )