Adding Colorful Vertical Menu Tabs In Blogger

My endless imagination brought me  to make another kind of menu tabs but  for this time  we will position it in a vertical manner. The initial codes was from Muhammad Mustafa and I made some changes on it to  be more compatible with the newbie bloggers. Here are the steps on how to make this vertical menu tabs.

Check also this  post regarding on how to make a horizontal drop menu tabs in a blog which  is a  always present in every blog across the internet.

Live Demo

Adding Colorful Vertical Menu Tabs In Blogger

Note: Back -up your Template
Step 1.  Go to your Blogger Dashboard
Step 2.  Click Template  and have a back-up on it
Step 3.  Hit the Edit HTML button
Step 4. Select among the  21 vertical menu tabs below.  As you have noticed that there are two sets of codes available in every vertical menu tabs, the CSS which is responsible for the appearance and the HTML which is responsible for number of tabs and positioning of the menu. Place the  CSS of the selected menu tabs above the tag ]]></b:skin> (don't forget to Save your Template after putting the css code above the ]]></b:skin tag) and then put the HTML tag directly on your sidebar (either left or right).

How to Customize the Navigation Menu Tabs

 If you want to change the Menu links (mark with the '#1, #2, #3, #4 and #5') and Tab's name (mark with the bolded orange text 'Link 1, Link 2, Link 3, Link 4 and Link 5') as shown in the blockquote below.

<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, #4 and #5 with link or url of the page and replace the bolded orange text  ('Link 1, Link 2, Link 3, Link 4 and Link 5') with the  name of your pagetabs.
Adding another tab in your vertical menu tabs is another task especially if you have multi pages in your blog. Just find the  </ul> tag in the set of  HTML codes and add the code '<li><a href="#" >Link</a></li>' just above that </ul> tag as shown below.

<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>
<li><a href="#" >Link</a></li>
</ul> </div>

Vertical Menu Tab #1

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>

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

Vertical Menu Tab #2

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>

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

Vertical Menu Tab #3

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>

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

Vertical Menu Tab #4

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>

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

Vertical Menu Tab #5

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>

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

Vertical Menu Tab #6

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>

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/AVvXsEhIm9DkyvgQSprbBfXPRcf-n38b29uTHIxak6FjS9f-TXGa0YVXryYmbJr5HuTpi2aP_DxZ31z3EWO55nMbO-nbyIY-X3zniy-h3PkvUBjkecs9CwLwWAqaP6qDiRc3ad-4yp6sfLX2f_M/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIm9DkyvgQSprbBfXPRcf-n38b29uTHIxak6FjS9f-TXGa0YVXryYmbJr5HuTpi2aP_DxZ31z3EWO55nMbO-nbyIY-X3zniy-h3PkvUBjkecs9CwLwWAqaP6qDiRc3ad-4yp6sfLX2f_M/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }

Vertical Menu Tab #7

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>

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

Vertical Menu Tab #8

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>

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

Vertical Menu Tab #9

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>

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/AVvXsEi5yYD_uCNkGCqXMXfWHR0g_ABAs7hPpL4U1w1onvjzPT4s5UK1BDY-f_FbctSse7o0VfD9JGsDPPNMag_g-OeDZwwlnREXZEf3MJbj4lzj8lklMueznIJOqA0kI2BplheO2FEHFCLZ-cs/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/AVvXsEi5yYD_uCNkGCqXMXfWHR0g_ABAs7hPpL4U1w1onvjzPT4s5UK1BDY-f_FbctSse7o0VfD9JGsDPPNMag_g-OeDZwwlnREXZEf3MJbj4lzj8lklMueznIJOqA0kI2BplheO2FEHFCLZ-cs/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/AVvXsEi5yYD_uCNkGCqXMXfWHR0g_ABAs7hPpL4U1w1onvjzPT4s5UK1BDY-f_FbctSse7o0VfD9JGsDPPNMag_g-OeDZwwlnREXZEf3MJbj4lzj8lklMueznIJOqA0kI2BplheO2FEHFCLZ-cs/s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; }

Vertical Menu Tab #10

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>

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

Vertical Menu Tab #11

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>

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

Vertical Menu Tab #12

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>

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

Vertical Menu Tab #13

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>

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/AVvXsEhfd1Q-RKN_Y1SiGnRBbsW_Ho4q7m4f2PkOMAUdh7ONMyegu-Nr6fvVPiDaLRgC7N4mEqoPZYvPbBOx4rVy2GQBMyn-S9EBEMLW1NplLODLCiAv4ZZNnTHXO3Fkw82HYignZUSsoSI5h5o/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/AVvXsEhfd1Q-RKN_Y1SiGnRBbsW_Ho4q7m4f2PkOMAUdh7ONMyegu-Nr6fvVPiDaLRgC7N4mEqoPZYvPbBOx4rVy2GQBMyn-S9EBEMLW1NplLODLCiAv4ZZNnTHXO3Fkw82HYignZUSsoSI5h5o/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/AVvXsEhfd1Q-RKN_Y1SiGnRBbsW_Ho4q7m4f2PkOMAUdh7ONMyegu-Nr6fvVPiDaLRgC7N4mEqoPZYvPbBOx4rVy2GQBMyn-S9EBEMLW1NplLODLCiAv4ZZNnTHXO3Fkw82HYignZUSsoSI5h5o/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }

Vertical Menu Tab #14

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>

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

Vertical Menu Tab #15

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>

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

Vertical Menu Tab #16

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>

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

Vertical Menu Tab #17

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>

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

Vertical Menu Tab #18

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>

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

Vertical Menu Tab #19

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>

CSS Code:

#menu14 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh88F4zte45xX-KVM7GWXHedVbpfl7kSfvBkaY1lbjfAqzQ6ZLBddRqcRMbW-3xXXrFxOGa7Es_a4qesrqb8REiRbbTw8zjSxv-GXYnFVB3dQKZzBVhJR7d_p8wrcic7zIRJeVv3wRt528/s800/menu14.gif); padding: 8px 0 0 10px; }

Vertical Menu Tab #20

HTML Code:

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

CSS Code:

#star ul { list-style: none; margin: 0; padding:0; } #star img { border: none; } #star { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; } #star 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;text-align:right; } #star li a:link, #star li a:visited { color: #8BADCF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCUXiO95dH_CPpnbhj3-XCs_gqLHz6dHcEmSOhTF3zmZ8HY30870Xc4XvLXgldBIKTG0pQ6dQDdbrtLs64DhG3STPtk79kzRo_LPSRvSkJ3iUsokV0KMPvLjqbf09zxf1tHh76ZfFD73lj/s1600/vt122.jpg); padding: 8px 0 0 10px; } #star li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCUXiO95dH_CPpnbhj3-XCs_gqLHz6dHcEmSOhTF3zmZ8HY30870Xc4XvLXgldBIKTG0pQ6dQDdbrtLs64DhG3STPtk79kzRo_LPSRvSkJ3iUsokV0KMPvLjqbf09zxf1tHh76ZfFD73lj/s1600/vt122.jpg) 0 -32px; padding: 8px 0 0 10px; }

Vertical Menu Tab #21

HTML Code:

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

#pink arrow ul { list-style: none; margin: 0; padding:0; } #pink arrow img { border: none; } #pink arrow { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; } #pink arrow 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;text-align:right; } #pink arrow li a:link, #pink arrow li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK5RMLiHlodRqf1oYJFN_W8h_jkoT15Omu1JMoZQywbrqGVaTSJ8EU9NVj0jvGkpsp7QsxzUqZ1-Gj8VEsridhetGBVBLCNgFTmiiUv1-c4hMQI9q5EZ1FKR6DUHdQh3PNeNflY8pRjtQp/s1600/v7777.jpg); padding: 8px 0 0 10px; } #pink arrow li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK5RMLiHlodRqf1oYJFN_W8h_jkoT15Omu1JMoZQywbrqGVaTSJ8EU9NVj0jvGkpsp7QsxzUqZ1-Gj8VEsridhetGBVBLCNgFTmiiUv1-c4hMQI9q5EZ1FKR6DUHdQh3PNeNflY8pRjtQp/s1600/v7777.jpg) 0 -32px; padding: 8px 0 0 10px; }

Thank for your patience Bro! Hope you like this tutorial. If you have some questions, problems, or even additional informations, please share it below. It is highly appreciated!
Enjoy!

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook