This is the pic stock for project "Exploding Boy Vertical" menu

2006-09-18T20:13:00.000-07:00

http://www.exploding-boy.com/2005/12/29/14-free-vertical-css-menus/

To do this is simple:

1. follow the installtion for the Horiz Tab Hack:

2. Add this CSS code:

#menu1 li{
margin:0;
padding:0 0 .25em 0;
text-indent:0px;
line-height:1.5em;
}

3. Copy the part:

#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;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu1 li a:link, #menu1 li a:visited {
color: #E4D6CD;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu1.gif);
padding: 8px 0 0 10px;
}

#menu1 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu1.gif) 0 -32px;
padding: 8px 0 0 10px;
}

/*- Menu 2--------------------------- */

#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;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu2 li a:link, #menu2 li a:visited {
color: #3688BA;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu2.gif);
padding: 8px 0 0 30px;
}

#menu2 li a:hover {
color: #3688BA;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu2.gif) 0 -32px;
padding: 8px 0 0 32px;
}

/*- Menu 3--------------------------- */

#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;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu3 li a:link, #menu3 li a:visited {
color: #8BADCF;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu3.gif);
padding: 8px 0 0 10px;
}

#menu3 li a:hover {
color: #627EB7;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu3.gif) 0 -32px;
padding: 8px 0 0 10px;
}

/*- Menu 4--------------------------- */

#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;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu4 li a:link, #menu4 li a:visited {
color: #CCC;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu4.gif);
padding: 8px 0 0 10px;
}

#menu4 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu4.gif) 0 -32px;
padding: 8px 0 0 10px;
}

/*- Menu 5--------------------------- */

#menu5 {
width: 200px;
margin: 10px;
}

#menu5 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu5 li a:link, #menu5 li a:visited {
color: #FFF;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu5.gif);
padding: 8px 0 0 10px;
}

#menu5 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu5.gif) 0 -32px;
padding: 8px 0 0 10px;
}

/*- Menu 6--------------------------- */

#menu6 {
width: 200px;
margin: 10px;
}

#menu6 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu6 li a:link, #menu6 li a:visited {
color: #FFF;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu6.gif);
padding: 8px 0 0 10px;
}

#menu6 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu6.gif) 0 -32px;
padding: 8px 0 0 10px;
}

/*- Menu 7--------------------------- */

#menu7 {
width: 200px;
margin: 10px;
}

#menu7 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu7 li a:link, #menu7 li a:visited {
color: #FFF;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu7.gif);
padding: 8px 0 0 30px;
}

#menu7 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu7.gif) 0 -32px;
padding: 8px 0 0 30px;
}

/*- Menu 8--------------------------- */

#menu8 {
width: 200px;
margin: 10px;
border-style: solid;
border-color: #656556;
border-size: 1px;
border-width: 1px;
}

#menu8 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu8 li a:link, #menu8 li a:visited {
color: #656556;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu8.gif);
padding: 8px 0 0 20px;
}

#menu8 li a:hover {
color: #474739;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu8.gif) 0 -32px;
padding: 8px 0 0 20px;
}

/*- Menu 9--------------------------- */

#menu9 {
width: 200px;
margin: 10px;
}

#menu9 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu9 li a:link, #menu9 li a:visited {
color: #FFF;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu9.gif);
padding: 8px 0 0 35px;
}

#menu9 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu9.gif) 0 -32px;
padding: 8px 0 0 35px;
}

/*- Menu 10--------------------------- */

#menu10 {
width: 200px;
margin: 10px;
}

#menu10 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu10 li a:link, #menu10 li a:visited {
color: #4D4D4D;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu10.gif);
padding: 8px 0 0 10px;
}

#menu10 li a:hover {
color: #FF9834;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu10.gif) 0 -32px;
padding: 8px 0 0 10px;
}

/*- Menu 11--------------------------- */

#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;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu11 li a:link, #menu11 li a:visited {
color: #889944;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu11.gif);
padding: 8px 0 0 25px;
}

#menu11 li a:hover {
color: #889944;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu11.gif) 0 -32px;
padding: 8px 0 0 27px;
}

/*- Menu 12--------------------------- */

#menu12 {
width: 200px;
margin: 10px;
}

#menu12 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 22px;
text-decoration: none;
}

#menu12 li a:link, #menu12 li a:visited {
color: #666;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu12.gif);
padding: 10px 0 0 35px;
}

#menu12 li a:hover {
color: #000;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu12.gif) 0 -32px;
padding: 10px 0 0 35px;
}

/*- Menu 13--------------------------- */

#menu13 {
width: 200px;
margin: 10px;
}

#menu13 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu13 li a:link, #menu13 li a:visited {
color: #C7377D;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu13.gif);
padding: 8px 0 0 10px;
}

#menu13 li a:hover {
color: #C7377D;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu13.gif) 0 -32px;
padding: 8px 0 0 10px;
}

/*- Menu 14--------------------------- */

#menu14 {
width: 200px;
margin: 10px;
}

#menu14 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu14 li a:link, #menu14 li a:visited {
color: #333;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu14.gif);
padding: 8px 0 0 10px;
}

#menu14 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu14.gif) 0 -32px;
padding: 8px 0 0 10px;
}

Below are the pics from the Exploding Boy menu:

CSS Picture Stock for Vertical Tabs

This is the pic stock for project "Exploding Boy Vertical" menu