Free CSS Vertical Menu Designs
Tweet
Free CSS Vertical Menu Designs
No. of Vertical Menu Demo
DEMO
Tab Menu 1
Tab Menu 2
Tab Menu 3
Tab Menu 4
Tab Menu 5
Tab Menu 6
Tab Menu 7
Tab Menu 8
Tab Menu 9
Tab Menu 10
Tab Menu 11
Tab Menu 12
Tab Menu 13
Tab Menu 14
HTML CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Free CSS Vertical Menu Designs at phpasks.com</title>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
background: #FFF;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
/*- Menu 1--------------------------- */
#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://www.phpasks.com/blogs/wp-content/uploads/2009/11/menu1.gif);
padding: 8px 0 0 10px;
}
#menu1 li a:hover {
color: #FFF;
background: url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/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://www.phpasks.com/blogs/wp-content/uploads/2009/11/menu2.gif);
padding: 8px 0 0 30px;
}
#menu2 li a:hover {
color: #3688BA;
background: url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/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://www.phpasks.com/blogs/wp-content/uploads/2009/11/menu3.gif);
padding: 8px 0 0 10px;
}
#menu3 li a:hover {
color: #627EB7;
background: url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/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://www.phpasks.com/blogs/wp-content/uploads/2009/11/menu4.gif);
padding: 8px 0 0 10px;
}
#menu4 li a:hover {
color: #FFF;
background: url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/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://www.phpasks.com/blogs/wp-content/uploads/2009/11/menu5.gif);
padding: 8px 0 0 10px;
}
#menu5 li a:hover {
color: #FFF;
background: url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/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://www.phpasks.com/blogs/wp-content/uploads/2009/11/menu6.gif);
padding: 8px 0 0 10px;
}
#menu6 li a:hover {
color: #FFF;
background: url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/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://www.phpasks.com/blogs/wp-content/uploads/2009/11/menu7.gif);
padding: 8px 0 0 30px;
}
#menu7 li a:hover {
color: #FFF;
background: url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/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://www.phpasks.com/blogs/wp-content/uploads/2009/11/menu8.gif);
padding: 8px 0 0 20px;
}
#menu8 li a:hover {
color: #474739;
background: url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/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://www.phpasks.com/blogs/wp-content/uploads/2009/11/menu9.gif);
padding: 8px 0 0 35px;
}
#menu9 li a:hover {
color: #FFF;
background: url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/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://www.phpasks.com/blogs/wp-content/uploads/2009/11/menu10.gif);
padding: 8px 0 0 10px;
}
#menu10 li a:hover {
color: #FF9834;
background: url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/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://www.phpasks.com/blogs/wp-content/uploads/2009/11/menu11.gif);
padding: 8px 0 0 25px;
}
#menu11 li a:hover {
color: #889944;
background: url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/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://www.phpasks.com/blogs/wp-content/uploads/2009/11/menu12.gif);
padding: 10px 0 0 35px;
}
#menu12 li a:hover {
color: #000;
background: url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/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://www.phpasks.com/blogs/wp-content/uploads/2009/11/menu13.gif);
padding: 8px 0 0 10px;
}
#menu13 li a:hover {
color: #C7377D;
background: url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/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://www.phpasks.com/blogs/wp-content/uploads/2009/11/menu14.gif);
padding: 8px 0 0 10px;
}
#menu14 li a:hover {
color: #FFF;
background: url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/menu14.gif) 0 -32px;
padding: 8px 0 0 10px;
}
</style>
</head>
<body>
<div>
<a href="http://www.phpasks.com">PHPASKS.com</a>
</div>
<h2>Tab Menu 1</h2>
<div id="menu1">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>
<br />
<h2>Tab Menu 2</h2>
<div id="menu2">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>
<br />
<h2>Tab Menu 3</h2>
<div id="menu3">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>
<br />
<h2>Tab Menu 4</h2>
<div id="menu4">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>
<br />
<h2>Tab Menu 5</h2>
<div id="menu5">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>
<br />
<h2>Tab Menu 6</h2>
<div id="menu6">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>
<br />
<h2>Tab Menu 7</h2>
<div id="menu7">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>
<br />
<h2>Tab Menu 8</h2>
<div id="menu8">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>
<br />
<h2>Tab Menu 9</h2>
<div id="menu9">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>
<br />
<h2>Tab Menu 10</h2>
<div id="menu10">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>
<br />
<h2>Tab Menu 11</h2>
<div id="menu11">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>
<br />
<h2>Tab Menu 12</h2>
<div id="menu12">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>
<br />
<h2>Tab Menu 13</h2>
<div id="menu13">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>
<br />
<h2>Tab Menu 14</h2>
<div id="menu14">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>
<br />
</body>
</html>
No comments yet.